DEV Community

Cover image for Quickstart Svelte - Setting Up and Running a Development Server
Yujin
Yujin

Posted on

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.

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.

favicon 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.

AssemblyAI Challenge

AssemblyAI Voice Agents Challenge 🗣️

Running through July 27, the AssemblyAI Voice Agents is all about building with Universal-Streaming, AssemblyAI's most advanced real-time transcription API. Universal-Streaming is ultra fast (300ms latency!), ultra accurate, and offers intelligent endpointing to keep conversations flowing naturally.

Start building 🏗️

Top comments (0)

Google AI Education track image

Work through these 3 parts to earn the exclusive Google AI Studio Builder badge!

This track will guide you through Google AI Studio's new "Build apps with Gemini" feature, where you can turn a simple text prompt into a fully functional, deployed web application in minutes.

Read more →

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay