diff --git a/app/README.md b/app/README.md index 9dfeb61..02ce532 100644 --- a/app/README.md +++ b/app/README.md @@ -6,12 +6,11 @@ - [Request API](#request-api) - [JX Variables](#jx-variables) - [App](#app) + - [Folder Structure](#folder-structure) - [Developing](#developing) - - [Svelte](#svelte) - - [tailwindcss](#tailwindcss) - [Linting \& Formatting](#linting--formatting) - - [Building](#building) - - [Minifying](#minifying) + - [Contributing](#contributing) + - [Building](#building) # Launcher @@ -73,16 +72,25 @@ The following variables are used to pass authentication info to a game when laun # App -## Developing - -### Svelte - This app is developed using [Svelte](https://svelte.dev/docs/introduction) (not [SvelteKit](https://kit.svelte.dev/)!). Svelte uses [Vite](https://vitejs.dev/guide/why.html) under the hood, which is a fantastic build and testing tool. This app also uses [TypeScript](https://www.typescriptlang.org/docs/handbook/intro.html) for scripting and [tailwindcss](https://tailwindcss.com/) for styling. Instead of `npm` and a `package-lock.json`, the frontend uses `bun` with a `bun.lockb`. Checkout [Bun](https://bun.sh/docs) to see why! +## Folder Structure + +``` +app/ - contains config files and the entry point, index.html. +└── src/ - contains App.svelte, main.ts and app.css. + ├── lib/ + │ ├── Util/ - .ts files used by the app + │ └── Components/ - all Svelte components, grouped by folders + ├── public/ - static assets visible to index.html + └── dist/ - production .html, .js, .css files generated by vite +``` + +## Developing To get started, run the following commands: ```bash @@ -96,18 +104,6 @@ Here are some recommendations when working on the front end: - Use `-D BOLT_DEV_SHOW_DEVTOOLS=1`, and `-D BOLT_DEV_LAUNCHER_DIRECTORY=1` when initialising cmake. This will allow us to debug and take advantage of hot reloading when we make changes in our files. - Use `bun run watch`. This will recompile the output when the source files change. -### Folder Structure - -``` -app/ - contains config files and the entry point, index.html. -└── src/ - contains App.svelte, main.ts and app.css. - ├── lib/ - │ ├── Util/ - .ts files used by the app - │ └── Components/ - all Svelte components, grouped by folders - ├── public/ - static assets visible to index.html - └── dist/ - production .html, .js, .css files generated by vite -``` - ### Linting & Formatting Keeping consistent styling is important, please run both the linter and formatter before committing any changes to see potential problems.