This tutorial will guide you through the process of creating a LitePolis UI module that utilizes a React.js frontend. We'll also demonstrate how to use GitHub Actions to automate the build and publishing process.
- Basic understanding of Python and React.js.
- Node.js and npm (or yarn) installed on your development machine.
- A GitHub account.
This template provides the basic structure for your LitePolis UI module. Here's a quick overview of the key files and directories:
setup.py
: Contains metadata about your Python package.litepolis_ui_template/
: This directory will be renamed to your actual package name (e.g.,litepolis_ui_my_awesome_ui
).core.py
: Contains the core logic for serving your UI's static files and defines theDEFAULT_CONFIG
.static/
: This directory will hold the static files of your React application.
tests/
: Contains tests for your module.app/
: This directory contains the source code for your React.js frontend.package.json
: Defines the dependencies and build scripts for your React app.src/
: Contains the React application's source code (e.g.,index.js
).public/
: Contains theindex.html
.
The frontend for this LitePolis UI module is built using React. You can find the source code in the app/
directory.
app/package.json
: This file lists the necessary dependencies for your React application, includingreact
,react-dom
, andreact-scripts
. It also defines thestart
andbuild
scripts.app/src/index.js
: This is the entry point for your React application. In this example, it renders a simple "Hello, world" message.
You can develop your React application as you normally would within the app/
directory. To start a development server (if needed), you can navigate to the app/
directory in your terminal and run:
cd app
npm start
Before deploying your LitePolis UI module, you need to build your React application into static files. To do this, navigate to the app/
directory in your terminal and run:
cd app
npm run build
Now, you need to integrate the built React application into your LitePolis UI module so that it can be served.
-
Copy the
build
directory contents: After runningnpm run build
in theapp/
directory, copy the entire contents of theapp/build
directory into thelitepolis_ui_template/static/
directory (or your renamed package'sstatic/
directory).Your directory structure should now look something like this:
litepolis-ui-my-awesome-ui/ ├── litepolis_ui_my_awesome_ui/ │ ├── core.py │ └── static/ │ ├── index.html │ ├── asset-manifest.json │ ├── favicon.ico │ ├── robots.txt │ ├── static/ │ │ ├── css/ │ │ └── js/ │ └── ... (other built assets) ├── app/ │ ├── ... ├── tests/ │ └── test_core.py └── setup.py
-
Ensure
core.py
is configured to serve static files: Thecore.py
file in your package should already be set up to serve static files from thestatic/
directory. Verify that it looks similar to this:from fastapi import FastAPI from fastapi.staticfiles import StaticFiles app = FastAPI() app.mount("/static", StaticFiles(directory="static"), name="static")
Make sure to update the setup.py
file with the correct information for your UI module, including the name
(remember the litepolis-ui-
prefix), version
, description
, etc.
This template includes a GitHub Actions workflow (python-publish.yml
) to automate the process of building your React application and publishing your LitePolis UI module to PyPI when you create a new release on GitHub.
name: Build
: Navigates to theapp/
directory and builds the React app usingnpm run build
. The output will be in theapp/build
directory we will move it to<litepolis_package_name>/static
.
By following these steps, you can effectively build a LitePolis UI module with a React frontend and leverage GitHub Actions for automated build and deployment. Remember to replace placeholders with your actual project details.