Quickstart setting up a Svelte project and run its development server using Docker. This guide explains configuring docker-compose.yml for initializing a Svelte + Vite project and running the dev server with hot-reloading.
Improve your readability in:
Quickstart Svelte - Setting Up and Running a Development Server
Quickstart setting up a Svelte project and run its development server using Docker. This guide explains configuring docker-compose.yml for initializing a Svelte + Vite project and running the dev server with hot-reloading.
blog.ardenov.com
In this quickstart guide, Svelte will be installed using Docker. This approach means you won’t need to install Node.js or any dependencies directly on your machine, because everything operates within a clean container environment. Make sure Docker is installed. If not, download it from https://docs.docker.com/get-docker/. Verify the installation by running docker -v in your terminal. Installing Svelte Installing Svelte + Vite using Docker Installing Svelte + Vite using Docker Let’s create docker-compose.yml file with the following content: version: '3' services: npm: image: node:18-alpine # LTS volumes: - ./app:/app:delegated - ./.npm:/root/.npm:delegated ports: - "5500:5173" command: - /bin/sh - -c - | npm create vite@5.5.5 . -- --template svelte npm install working_dir: /app restart: no This docker-compose.yml file sets up a containerized environment for creating a Svelte project using Node.js. It utilizes the lightweight (~50 MB) node:18-alpine image to ensure a consistent development environment, eliminating the need for Node.js installation on your local machine. The project files are generated in a shared folder called app, making them accessible from your host system. The configuration runs the command npm create vite@5.5.5 . -- --template svelte to initialize a new Svelte project and installs the necessary dependencies using npm install. The dot (.) indicates that the new project should be created in the current working directory. Instead of generating a new subfolder for the project, the files will be placed directly in the location where the command is executed. This approach is helpful when you have already set up a directory for the project, such as in a Docker setup where /app serves as the working directory. Additionally, the container maps default port from 5173 to 5500 so you can access the development server at http://localhost:5500. Once the container finishes setting up, you will find the Svelte project files in the ./app directory. By running docker compose up, you will have a fully functional Svelte development environment that is isolated from your system. This setup is ideal for ensuring compatibility and avoiding dependency conflicts in your local development environment. Run the following command to set up Svelte: docker compose up Run the Svelte Development Server Running the Svelte dev server Running the Svelte dev server Replace the contents of your docker-compose.yml file with the updated configuration below: version: '3' services: npm: image: node:18-alpine # LTS volumes: - ./app:/app:delegated - ./.npm:/root/.npm:delegated ports: - "5500:5173" command: - /bin/sh - -c - | npm run dev -- --host 0.0.0.0 working_dir: /app restart: no The command now runs npm run dev, which starts the Svelte development server. The -- --host 0.0.0.0 flag ensures the server binds to all network interfaces, making it accessible from outside the container. This is critical because Docker containers have their own isolated networking, and binding to 0.0.0.0 allows your host machine to access the server. Now, rerun the following command to start the development server: docker compose up You can access it with browser in http://localhost:5500 or in your LAN using the host local ip address: http://[host_ip_address]:5500. As you modify files in the ./app directory, the browser will update in real time thanks to Vite’s hot-reload capabilities. References https://docs.docker.com/get-docker/ https://vite.dev/guide/ https://svelte.dev/docs/svelte/getting-started https://nodejs.org/en/download/package-manager https://hub.docker.com/_/node/tags?name=18-alpine
Originally published at https://blog.ardenov.com.
Top comments (0)