mirror of
https://github.com/inventree/InvenTree.git
synced 2025-04-29 03:56:43 +00:00
f97cdef9fc
* Fix API endpoint URLs * Adds "authenticated" field to root API endpoint * Load global status data separately - Create new global state manager - Load *after* login - Prevents auth popup dialog and failure messages * Add launch config for frontend dev * Update docs * Clear token auth if no token is defined * remove unneeded import * Revert format of InfoView endpoint * Remove "authenticated" from InfoView * Refactor is_staff token check - Using new get_token_from_request method * Cleanup code - return early * URL fixes - More fixes for incorrect api calls * Better tracking of authenticated status - track an internal flag in apiState * Prioritize token auth * Only fetch userState if authenticated * Force unauthenticated state on first launch * Updates to login procedure - Rename doClassicLogin to doBasicLogin (reflecting "basic" auth) - Add "loggedIn" attribute to sessionState - Cleanup procedure for securing a token * Abort early on checkLoginState - Prevent failed calls to user_me * Refactoring - Simpler to just track token state - No need for separate status tracker - Works much cleaner this way * Remove debug messages * Cleanup unused imports * Fix unused variable * Revert timeout to 2000ms * Rename doClassicLogout -> doLogout * Improvements for checkLoginState - Account for the presence of a CSRF session cookie - If available, use it to fetch a token * Clear CSRF cookie on logout - Forces logout from session - Tested, works well! - Clean up notifications * Cleanup setApiDefaults method * fix global logout (PUI -> CUI) --------- Co-authored-by: Matthias Mair <code@mjmair.com>
69 lines
3.0 KiB
Markdown
69 lines
3.0 KiB
Markdown
---
|
|
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/
|
|
|
|
### Debugging
|
|
|
|
You can attach the vscode debugger to the frontend server to debug the frontend code. With the frontend server running, open the `Run and Debug` view in vscode and select `InvenTree Frontend - Vite` from the dropdown. Click the play button to start debugging. This will attach the debugger to the running vite server, and allow you to place breakpoints in the frontend code.
|
|
|
|
!!! info "Backend Server"
|
|
To debug the frontend code, the backend server must be running (in a separate process). Note that you cannot debug the backend server and the frontend server in the same vscode instance.
|
|
|
|
### 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"
|