This is an experimental example of integrating React into a Tethys App. The goal would be to use React to create the frontend of the app and Tethys to create the backend/API.
- Install the app in Tethys Platform
conda activate tethys
cd tethysapp-my_react_app
tethys install -d
- Install the node and dependencies
conda install -c conda-forge nodejs
cd tethysapp-my_react_app
npm install --dev
The webpack dev server is configured to proxy the Tethys development server (see webpack.config.js). The app endpoint will be handled by the webpack development server and all other endpoints will be handled by the Tethys (Django) development server. As such, you will need to start both in separate terminals.
- Start Tethys development server
tethys manage start
- Start webpack development server (in separate terminal)
npm start
Webpack is configured to bundle and build the React app into the public/frontend directory. Before building a Python distribution, you should run the npm run build to update the build.
Use the following commands to lint and test the React portion of the app.
npm run lint
npm run test
The linting capability is powered by eslint and a number of plugins for React. The testing capabilities include jest, jsdom, testing-framework, user-event, and a few other JavaScript testing utilties to make it easy to test the frontend of the React-Tethys app.
This implementation is based on the excellent work done by @Jitensid that can be found on GitHub here: Jitensid/django-webpack-dev-server.
Some resources and source code is also derived from projects generated using Create React App.