Building and deploying

Building turns the source code into a set of ready files for the browser: JSX is compiled to JavaScript, the code is minified, and files get unique names for caching. A built Solid app is just static files, which any web server or static host can serve.

Building

In the project folder, run:

npm run build

Vite builds the project into the dist folder:

dist/
├── index.html
└── assets/
    ├── index-B3kq9xLm.js
    └── index-Cz81pQwa.css

The letters in the file names change whenever the code changes. That way a visitor's browser does not keep an old version in its cache.

Checking the build

npm run serve

The template's serve command runs vite preview — a simple server that serves the dist folder. The terminal shows an address, usually http://localhost:4173. Check there that everything works as it did during development.

Publishing on a host

Usually it is enough to connect the repository on the host's site and enter these two values. The host then builds the app after every change on the main branch.

Routes on the server

If you open https://example.com/posts/7 directly or reload such a page, the server looks for a file posts/7, which does not exist. Configure it to return index.html for any address, and Solid Router takes it from there. On Netlify, create the file public/_redirects for this:

/*    /index.html   200

Vite copies the contents of public into dist unchanged, so the rule reaches the host with the build. Other hosts call a similar setting SPA fallback or rewrite.

The API address

Addresses that differ between development and the server go into a .env file. Vite passes only variables prefixed with VITE_ to the code:

VITE_API_URL=https://jsonplaceholder.typicode.com

In code the value is read as import.meta.env.VITE_API_URL.

SolidStart

If you need server rendering, server functions or file-based routes, the project moves to SolidStart. For an ordinary client app like the blog from this course, Vite is enough.

Common mistake

Opening dist/index.html with a double click. The page loads from a file:// address, file paths and routes do not work, and you see a blank screen. Always check the built app through a server — npm run serve.