mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2026-03-28 02:31:17 +01:00
8674765528
# Description of Changes Previously, `VITE_*` environment variables were scattered across the codebase with hardcoded fallback values inline (e.g. `import.meta.env.VITE_STRIPE_KEY || 'pk_live_...'`). This made it unclear which variables were required, what they were for, and caused real keys to be silently used in builds where they hadn't been explicitly configured. ## What's changed I've added `frontend/.env.example` and `frontend/.env.desktop.example`, which declare every `VITE_*` variable the app uses, with comments explaining each one and sensible defaults where applicable. These are the source of truth for what's required. I've added a setup script which runs before `npm run dev`, `build`, `tauri-dev`, and all `tauri-build*` commands. It: - Creates your local `.env` / `.env.desktop` from the example files on first run, so you don't need to do anything manually - Errors if you're missing keys that the example defines (e.g. after pulling changes that added a new variable). These can either be manually-set env vars, or in your `.env` file (env vars take precedence over `.env` file vars when running) - Warns if you have `VITE_*` variables set in your environment that aren't listed in any example file I've removed all `|| 'hardcoded-value'` defaults from source files because they are not necessary in this system, as all variables must be explicitly set (they can be set to `VITE_ENV_VAR=`, just as long as the variable actually exists). I think this system will make it really obvious exactly what you need to set and what's actually running in the code. I've added a test that checks that every `import.meta.env.VITE_*` reference found in source is present in at least one example file, so new variables can't be added without being documented. ## For contributors New contributors shouldn't need to do anything - `npm run dev` will create your `.env` automatically. If you already have a `.env` file in the `frontend/` folder, you may well need to update it to make the system happy. Here's an example output from running `npm run dev` with an old `.env` file: ``` $ npm run dev > frontend@0.1.0 dev > npm run prep && vite > frontend@0.1.0 prep > tsx scripts/setup-env.ts && npm run generate-icons setup-env: see frontend/README.md#environment-variables for documentation setup-env: .env is missing keys from config/.env.example: VITE_GOOGLE_DRIVE_CLIENT_ID VITE_GOOGLE_DRIVE_API_KEY VITE_GOOGLE_DRIVE_APP_ID VITE_PUBLIC_POSTHOG_KEY VITE_PUBLIC_POSTHOG_HOST Add them manually or delete your local file to re-copy from the example. setup-env: the following VITE_ vars are set but not listed in any example file: VITE_DEV_BYPASS_AUTH Add them to config/.env.example or config/.env.desktop.example if they are required. ``` If you add a new `VITE_*` variable to the codebase, add it to the appropriate `frontend/config/.env.example` file or the test will fail.
146 lines
5.5 KiB
Markdown
146 lines
5.5 KiB
Markdown
# Frontend
|
|
## Environment Variables
|
|
|
|
The frontend requires environment variables to be set before running. `npm run dev` will create a `.env` file for you automatically on first run using the defaults from `config/.env.example` - for most development work this is all you need.
|
|
|
|
If you need to configure specific services (Google Drive, Supabase, Stripe, PostHog), edit your local `.env` file. The values in `config/.env.example` show what each variable does and provides sensible defaults where applicable.
|
|
|
|
For desktop (Tauri) development, `npm run tauri-dev` will additionally create a `.env.desktop` file from `config/.env.desktop.example`.
|
|
|
|
## Docker Setup
|
|
|
|
For Docker deployments and configuration, see the [Docker README](../docker/README.md).
|
|
|
|
## Available Scripts
|
|
|
|
In the project directory, you can run:
|
|
|
|
### `npm start`
|
|
|
|
Runs the app in the development mode.\
|
|
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
|
|
|
|
The page will reload when you make changes.\
|
|
You may also see any lint errors in the console.
|
|
|
|
### `npm test`
|
|
|
|
Launches the test runner in the interactive watch mode.\
|
|
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
|
|
|
|
### `npm run build`
|
|
|
|
Builds the app for production to the `build` folder.\
|
|
It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
|
|
The build is minified and the filenames include the hashes.\
|
|
Your app is ready to be deployed!
|
|
|
|
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
|
|
|
|
### `npm run eject`
|
|
|
|
**Note: this is a one-way operation. Once you `eject`, you can't go back!**
|
|
|
|
If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
|
|
|
|
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
|
|
|
|
You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
|
|
|
|
## Learn More
|
|
|
|
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
|
|
|
|
To learn React, check out the [React documentation](https://reactjs.org/).
|
|
|
|
### Code Splitting
|
|
|
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
|
|
|
|
### Analyzing the Bundle Size
|
|
|
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
|
|
|
|
### Making a Progressive Web App
|
|
|
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
|
|
|
|
### Advanced Configuration
|
|
|
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
|
|
|
|
### Deployment
|
|
|
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
|
|
|
|
### `npm run build` fails to minify
|
|
|
|
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
|
|
|
|
|
|
## Tauri
|
|
In order to run Tauri, you first have to build the Java backend for Tauri to use.
|
|
|
|
**macOS/Linux:**
|
|
|
|
From the root of the repo, run:
|
|
|
|
```bash
|
|
./gradlew clean build
|
|
./scripts/build-tauri-jlink.sh
|
|
```
|
|
|
|
**Windows**
|
|
|
|
From the root of the repo, run:
|
|
|
|
```batch
|
|
gradlew clean build
|
|
scripts\build-tauri-jlink.bat
|
|
```
|
|
|
|
### Testing the Bundled Runtime
|
|
|
|
Before building the full Tauri app, you can test the bundled runtime:
|
|
|
|
**macOS/Linux:**
|
|
```bash
|
|
./frontend/src-tauri/runtime/launch-stirling.sh
|
|
```
|
|
|
|
**Windows:**
|
|
```cmd
|
|
frontend\src-tauri\runtime\launch-stirling.bat
|
|
```
|
|
|
|
This will start Stirling-PDF using the bundled JRE, accessible at http://localhost:8080
|
|
|
|
### Dev
|
|
To run Tauri in development. Use the command in the `frontend` folder:
|
|
|
|
```bash
|
|
npm run tauri-dev
|
|
```
|
|
|
|
This will run the gradle runboot command and the tauri dev command concurrently, starting the app once both are stable.
|
|
|
|
> [!NOTE]
|
|
>
|
|
> Desktop builds require additional environment variables. See [Environment Variables](#environment-variables)
|
|
> above - `npm run tauri-dev` will set these up automatically from `config/.env.desktop.example` on first run.
|
|
|
|
### Build
|
|
To build a deployment of the Tauri app. Use this command in the `frontend` folder:
|
|
|
|
```bash
|
|
npm run tauri-build
|
|
```
|
|
|
|
This will bundle the backend and frontend into one executable for each target. Targets can be set within the `tauri.conf.json` file.
|
|
|
|
> [!NOTE]
|
|
>
|
|
> Desktop builds require additional environment variables. See [Environment Variables](#environment-variables)
|
|
> above - `npm run tauri-build` will set these up automatically from `config/.env.desktop.example` on first run.
|