Frontend

Build the Frontend Web UI

Build using Makefile

Your best bet is to use the Makefile on this, too. Just issue:

❯ make build-frontend
[*] Cleanup SvelteKit App
[OK] Cleanup done
[*] Building SvelteKit App

> dose@1.0.0 tailwind:build
> cross-env TAILWIND_MODE=build cross-env NODE_ENV=production postcss src/styles/tailwind.css -o src/styles/tailwind-output.css

warn - You have enabled the JIT engine which is currently in preview.
warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
Source path: redacted
Setting up new context...
Finding changed files: 3.293ms
Generate rules: 32.227ms
Build stylesheet: 0.688ms
Potential classes:  2550
Active contexts:  1
Content match entries 1126
JIT TOTAL: 113.848ms

> dose@1.0.0 build:only
> svelte-kit build

[... snip ...]

3:56:22 PM [vite-plugin-svelte] The following packages did not export their `package.json` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.
- ky
103 modules transformed.

[... snip ...]

[dotenv][DEBUG] did not match key and value when parsing line 4:
vite v2.5.1 building SSR bundle for production...
transforming (70) .svelte-kit/build/runtime/internal/singletons.js

[... snip ...]

3:56:25 PM [vite-plugin-svelte] The following packages did not export their `package.json` file so we could not check the "svelte" field. If you had difficulties importing svelte components from a package, then please contact the author and ask them to export the package.json file.
- ky
105 modules transformed.
.svelte-kit/output/server/app.js   329.07 KiB

Run npm run preview to preview your production build locally.

> Using @sveltejs/adapter-static
done
[OK] SvelteKit App was built
[OK] Serve content of ./frontend/build via a webserver

Content of the build folder for reference

.
├── _app
├── css
├── favicon.ico
├── fonts
├── img
├── index.html
├── js
├── player
├── sounds
└── webfonts

What’s next?

Now everything left to do is to server the content of frontend/build via a webserver like Apache2, Nginx or Caddy2.

You could instead also run it right now using the Makefile (which will use the previously created .env file in frontend folder) and issue make run-dev-frontend.

Ready to throw darts?