Docker Vite Boilerplate

Intro

We've dockerized enough Vite applications at this point that we should have a boilerplate.

We want to have different settings for development and production environments so that we can have hot reloading and all that locally, but instruct docker to build a production build in non local environment. Here is how we set all this up.

Define Development Environment

First we need to make sure that node understand our local environment is a development environment.

Create a .env file if you haven't already and specify that the current environment is development.

.env

NODE_ENV=development

and make sure the .env file is in your .gitignore file.

.gitignore

.env

We don't want the production environment we send this to for building to think it's a dev environment. The default node environment is production.

Dockerfiles

We will be making multiple Dockerfiles. One for development and one for production.

The production dockerfile only needs to build the production build. The rest of the CI/CD pipeline should handle locating those final build files and hosting them. We don't want to serve the files from an nginx server or any of that nonsense.

Dockerfile.production

FROM node:18-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

RUN npm run build

Conversely the development environment doesn't need to build production files. But we do need to call the npm run dev command, which will start the Vite server.

Dockerfile.development

FROM node:18-alpine

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD [ "npm", "run", "dev" ]

Docker Compose Files

Now we use docker compose files to make our lives easier. We will split this into three files. A default file, and a dev and prod file that will specify variables based on environment. Namely which Dockerfile it should run.

docker-compose.yml

services:
  some-service-name:
    image: vite
    build:
      context: .
      dockerfile: Dockerfile.${NODE_ENV:-production}
    environment:
      NODE_ENV: ${NODE_ENV:-production}
    ports:
      - 3000:3000

The service and image names are arbitrary, but I like to use the name of the framework as the image name.

docker-compose.prod.yml

services:
  some-service-name:
    build:
      dockerfile: Dockerfile.production
    environment:
      NODE_ENV: production

docker-compose.dev.yml

services:
  some-service-name:
    build:
      dockerfile: Dockerfile.development
    environment:
      NODE_ENV: development

Make sure your service name matches on all three compose files.

Starting The Container

The reason we go to the trouble of making these compose files this way, is now we can just

docker compose up

In our dev environment and that will start the application. No other fancy commands or flags. You don't even have to build the container if you haven't already done that it. It will automatically build the image and container before starting the server. You just have to remember this one simple command. I set all my project up with way.

That should be a solid foundation to Docker a Vite application for production and local development. Cheers.

Comments

Recent Work

Basalt

basalt.software

Free desktop AI Chat client, designed for developers and businesses. Unlocks advanced model settings only available in the API. Includes quality of life features like custom syntax highlighting.

Learn More

BidBear

bidbear.io

Bidbear is a report automation tool. It downloads Amazon Seller and Advertising reports, daily, to a private database. It then merges and formats the data into beautiful, on demand, exportable performance reports.

Learn More