Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Documentation update; New frontend docs, additional info on devcontainer (#5974)

Browse Source 
* Add Frontend dev docs, and expand devcontainer docs

* Grammatical fixes
This commit is contained in:
Lavissa 2023-11-23 02:21:09 +01:00 committed by GitHub
parent f7a8707a9a
commit f4ba7a1698
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
docs/docs/develop/devcontainer.md
View File

@ -24,7 +24,12 @@ You need to make sure that you have the following tools installed before continu
``` ```
2. open vscode, navigate to the extensions sidebar and search for `ms-vscode-remote.remote-containers`. Click on install. 2. open vscode, navigate to the extensions sidebar and search for `ms-vscode-remote.remote-containers`. Click on install.
3. open the cloned folder from above by clicking on `file > open folder` 3. open the cloned folder from above by clicking on `file > open folder`
4. vscode should now ask you if you'd like to reopen this folder in a devcontainer. Click `Reopen in Container`. If it shouldn't ask you open the command palette (<kbd>CMD</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>) and search for `Reopen in Container`. This can take a few minutes until the image is downloaded, build and setup with all dependencies. 4. vscode should now ask you if you'd like to reopen this folder in a devcontainer. Click `Reopen in Container`. If it does not ask you, open the command palette (<kbd>CTRL/CMD</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd>) and search for `Reopen in Container`. This can take a few minutes until the image is downloaded, build and setup with all dependencies.
5. Open a new terminal from the top menu by clicking `Terminal > New Terminal`
6. The last line in your terminal should now show the text `(venv)` at the start of the line
7. From here' we need to setup the InvenTree specific development environment
8. From the newly opened terminal, run: `invoke install`
9. If you want test data on your server, run: `invoke setup-test --dev`. If not, run `invoke setup-dev`
### Setup in codespaces ### Setup in codespaces
@ -58,6 +63,10 @@ You can either only run InvenTree or use the integrated debugger for debugging.
You can now set breakpoints and vscode will automatically pause execution if that point is hit. You can see all variables available in that context and evaluate some code with the debugger console at the bottom. Use the play or step buttons to continue execution. You can now set breakpoints and vscode will automatically pause execution if that point is hit. You can see all variables available in that context and evaluate some code with the debugger console at the bottom. Use the play or step buttons to continue execution.
!!! info "React Frontend development"
The React frontend requires additional steps to run. Refer to [Platform UI / React](./react-frontend.md)
### Plugin development ### Plugin development
The easiest way for plugin developing is by using the InvenTree devcontainer. Just mount your plugin repository also into the devcontainer workspace and install it as pip editable package. The easiest way for plugin developing is by using the InvenTree devcontainer. Just mount your plugin repository also into the devcontainer workspace and install it as pip editable package.

61
docs/docs/develop/react-frontend.md Normal file
View File

@ -0,0 +1,61 @@
---
title: Platform UI / React
---
## Setup
The new React-based UI will not be available by default. In order to set your development environment up to view the frontend, follow this guide.
The new UI requires a separate frontend server to run to serve data for the new Frontend.
### Install
The React frontend requires its own packages that aren't installed via the usual invoke tasks.
#### Docker
Run the following command:
`docker compose run inventree-dev-server invoke frontend-compile`
This will install the required packages for running the React frontend on your InvenTree dev server.
#### Devcontainer
!!! warning "This guide assumes you already have a running devcontainer"
!!! info "All these steps are performed within Visual Studio Code"
Open a new terminal from the top menu by clicking `Terminal > New Terminal`
Make sure this terminal is running within the virtual env. The start of the last line should display `(venv)`
Run the command `invoke frontend-compile`. Wait for this to finish
### Running
After finishing the install, you need to launch a frontend server to be able to view the new UI.
Using the previously described ways of running commands, execute the following:
`invoke frontend-dev` in your environment
This command does not run as a background daemon, and will occupy the window it's ran in.
### Accessing
When the frontend server is running, it will be available on port 5173.
i.e: https://localhost:5173/
### Information
On Windows, any Docker interaction is run via WSL. Naturally, all containers and devcontainers run through WSL.
The default configuration for the frontend server sets up file polling to enable hot reloading.
This is in itself a huge performance hit. If you're running an older system, it might just be enough to block anything from running in the container.
If you're having issues running the Frontend server, have a look at your Docker Desktop app.
If you routinely see the container using almost ALL available CPU capacity, you need to turn off file polling.
!!! warning "Turning off file polling requires you to restart the frontend server process upon each file change"
Head to the following path: `src/frontend/vite.config.ts` and change:
`const IS_IN_WSL = platform().includes('WSL') || release().includes('WSL');`
to
`const IS_IN_WSL = false;`
!!! tip "Make sure to not commit this change!"
!!! warning "This change will require you to restart the frontend server for every change you make in the frontend code"