Using Vite with Spin from ServerSide Up for Local Development

The default Spin configuration after running spin init or spin new does not include a configuration for running Vite out of the box.

So let's get going and implement the Vite / Docker configuration for Spin ServerSide Up.

What we need to modify the following files:

/etc/hosts
package.json
vite.config.js
Dockerfile.node (optionally)
docker-compose.dev.yml

We are using laravel.dev.test as our local domain. Feel free to change it every occurrence of this with your project name.

Code example on GitHub

You can find a demo example app at GitHub: https://github.com/LambdaDigamma/laravel-spin-vite-example

System Prerequisites

Update your hosts file by editing sudo vim /etc/hosts to resolve requests to the Vite client on the local machine.

/etc/hosts

1# For accessing the Laravel app locally
2127.0.0.1 laravel.dev.test
3# For using Vite in development
4127.0.0.1 vite.dev.test # add this

Info

Most of the time you do not need to restart any networking services or flush your DNS cache. You can check by pinging the domain using ping laravel.dev.test. This operation should look something like this and return your localhost at 127.0.0.1.

1ping laravel.dev.test
2PING laravel.dev.test (127.0.0.1): 56 data bytes
364 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.075 ms
464 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.253 ms
564 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.368 ms
6…

If this is not the case you either need to flush your DNS (e.g. using dscacheutil -flushcache) or you have a typo somewhere.

Check your package.json

Make sure you are running vite --host in your development script.

package.json

1"scripts": {
2    "dev": "vite --host",
3    "build": "vite build"
4},

Add a Dockerfile for your Node container

Create a file Dockerfile.node at the base of your repository. This may not be necessary, but the demo application Financial Freedom does it the same way.

Dockerfile.node

1FROM node:20 as base
2 
3### Development
4FROM base as development
5ARG USER_ID
6 
7RUN usermod -u $USER_ID node
8 
9USER node

Changes in `docker-compose.dev.yml`

Insert the port definition 5173 in your traefik container configuration.

docker-compose.dev.yml

1traefik:
2    ports:
3    - "80:80"
4    - "443:443"
5    - 5173:5173 
6    networks:
7      # ...

Then update the node and php container.

docker-compose.dev.yml

 1node:
 2    build:
 3      context: . 
 4      dockerfile: Dockerfile.node
 5      args:
 6        USER_ID: ${SPIN_USER_ID}
 7    networks:
 8      - development
 9    environment:
10      VITE_HOST: "vite.dev.test" 
11    volumes:
12      - .:/usr/src/app/:cached 
13    working_dir: /usr/src/app/
14    labels: # add these labels
15      - "traefik.enable=true" 
16      - "traefik.http.routers.vite.rule=HostRegexp(`vite.dev.test`)"
17      - "traefik.http.routers.vite.entrypoints=websecure"
18      - "traefik.http.routers.vite.tls=true"
19      - "traefik.http.services.vite.loadbalancer.server.port=5173"
20      - "traefik.http.services.vite.loadbalancer.server.scheme=https"
21 
22php:
23    build:
24      context: .
25      dockerfile: Dockerfile
26      target: development
27      args:
28        USER_ID: ${SPIN_USER_ID}
29        GROUP_ID: ${SPIN_GROUP_ID}
30    environment:
31      SSL_MODE: "full" 
32    volumes:
33      - .:/var/www/html/
34    networks:
35      - development
36    depends_on:
37      - traefik
38    labels:
39      - "traefik.enable=true"
40      - "traefik.http.routers.laravel.rule=HostRegexp(`laravel.dev.test`)"
41      - "traefik.http.routers.laravel.entrypoints=websecure"
42      - "traefik.http.routers.laravel.tls=true"
43      - "traefik.http.services.laravel.loadbalancer.server.port=8443" 
44      - "traefik.http.services.laravel.loadbalancer.server.scheme=https"

Changes in your Traefik configuration

Find your Traefik development configuration at .infrastructure/conf/traefik/dev/traefik.yml and add the address for your Vite container.

.infrastructure/conf/traefik/dev/traefik.yml

 1entryPoints:
 2  web:
 3    address: ":80"
 4    http:
 5      redirections:
 6        entrypoint:
 7          to: websecure
 8          scheme: https
 9 
10  websecure:
11    address: ":443"
12 
13  vite: 
14    address: ":5173"
15 
16accessLog: {}

Changes in `vite.config.js`

You need to add the Basic SSL plugin from Vite. You can do that by running npm install --save-dev @vitejs/plugin-basic-ssl. Then you retrieve the host from the environment with the loadEnv function. Then you configure the server object like you can see in the following listing.

vite.config.js

 1import { defineConfig, loadEnv } from 'vite';
 2import laravel from 'laravel-vite-plugin';
 3import basicSsl from '@vitejs/plugin-basic-ssl'
 4 
 5const env = loadEnv('', process.cwd());
 6const host = env.VITE_HOST;
 7 
 8export default defineConfig({
 9    plugins: [
10        basicSsl(),
11        laravel({
12            input: ['resources/css/app.css', 'resources/js/app.js'],
13            refresh: true,
14        }),
15    ],
16    server: {
17        host,
18        hmr: {
19            host,
20            clientPort: 443
21        },
22    },
23});

That's it. Now we can run our newly configured Vite container.

Running Vite

Use the spin run command to download all node dependencies if needed.

1spin run node npm install

Then you can just start your vite command.

1spin run node npm run dev