How to return a React.js app as a UI in a template response of a Nextcloud app?

💻 Development
1

I have a React.js app and I’d like it to be returned as a UI in a template response of a Nextcloud application. Nextcloud’s developer manual only explains how to return a Vue app as an interface. Could someone please make a tutorial on (or just explain) how to integrate a React.js app into a Nextcloud app?

2

Simply adding the build output js file using addScript should work, Vue is not that much different from react in this regard I think. Additionally, you’ll need a root element that you mount your React app to and you’re good to go.

1 Like
3

Hi I just figured a small app with react may help you guys:

App.js

/* eslint-disable jsdoc/require-jsdoc */
import React from 'react'
import './App.css'

function App() {
	const [count, setCount] = React.useState(0)

	function increment() {
		setCount(() => count + 1)
	}
	return (
		<div id="content" className="App">
			<button className="count-click" onClick={increment}>
				Count is: {count}
			</button>
		</div>
	)
}

---------------------------------------------------------------------------------------------------------
export default App

App.css

#content {
	width: 100%;
	height: 100%;
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.count-click {
	width: fit-content;
	height: fit-content;
}

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./src/App.js";

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

webpack.config.js

const path = require('path')

module.exports = {
	mode: 'development',
	entry: './index.js',
	output: {
		path: path.resolve(__dirname, 'js'),
		filename: 'reactapp-main.js', // replace with your own projectName-main.js
	},
	target: 'web',
	devServer: {
		port: '9500',

		static: ['./public'],

		open: true,

		hot: true,

		liveReload: true,
	},
	resolve: {
		extensions: ['.js', '.jsx', '.json'],
	},
	module: {
		rules: [
			{
				test: /\.(js|jsx)$/,
				exclude: /node_modules/,
				use: 'babel-loader',
			},
			{
				test: /\.css$/i,
				use: ['style-loader', 'css-loader'],
			},
		],
	},
}

.babelrc

{
  /*
        a preset is a set of plugins used to support particular language features.
        The two presets Babel uses by default: es2015, react
    */
  "presets": [
    "@babel/preset-env", //compiling ES2015+ syntax
    "@babel/preset-react" //for react
  ],
  /*
        Babel's code transformations are enabled by applying plugins (or presets) to your configuration file.
    */
  "plugins": ["@babel/plugin-transform-runtime"]
}