Tutorial: Dockerize a full-stack TypeScript application

1. Make sure the JavaScript Debugger, Node.js, Node.js Remote Interpreter, and Docker required plugins are enabled on the Settings | Plugins page, tab Installed. For more information, refer to Managing plugins.

2. Download, install, and configure Docker as described in Docker.

1. Click New Project on the Welcome screen or select File | New | Project from the main menu.

2. In the dialog that opens, select Empty Project in the left-hand pane.

3. Specify the location of the application and its name, for example, weather_dashboard.

4. 

5. Click Create.

1. Create a backend/Dockerfile. To do that, go to the Project tool window, select New from the context menu of the backend folder, and then select Dockerfile from the list.

   Open the backend/Dockerfile in the editor and paste the following code in it:

   # Start from the official Node.js 24.5.0 image based on Alpine Linux FROM node:22-alpine # Set the working directory inside the container to /app # If the directory doesn't exist, Docker should create it # All subsequent commands (COPY, RUN, CMD, etc.) are executed # relative to this directory WORKDIR /app # Copy the files that match package*.json from the backend folder # to /app. In our project these are backend/package.json # and backend/package-lock.json COPY package*.json ./ # Run npm install inside the container # Download and install dependencies from backend/package.json # Create an /app/node_modules folder RUN npm install # Copy the source code and the configuration files # from the backend folder into /app. # Skip the files that are listed in .dockerignore, # in our case that is the node_modules folder COPY . . # Expose the container's port EXPOSE 3000 # Specify the default commands to execute when the container starts CMD ["npm", "run", "dev"]

2. Create a backend/.dockerignore file. To do that, go to the Project tool window, select New from the context menu of the backend folder, select File from the list, and then type .dockerignore in the popup dialog that appears.

   Open the newly created backend/.dockerignore file in the editor and add node_modules to it.

3. Create a frontend/Dockerfile. To do that, go to the Project tool window, select New from the context menu of the frontend folder, and then select Dockerfile from the list.

   Open the frontend/Dockerfile in the editor and paste the following code in it:

   # Start from the official Node.js 22.0.0 image based on Alpine Linux FROM node:22-alpine # Set the working directory inside the container to /app # If the directory doesn't exist, Docker should create it # All subsequent commands (COPY, RUN, CMD, etc.) are executed # relative to this directory WORKDIR /app # Copy the files that match package*.json from the frontend folder # to /app. In our project these are frontend/package.json # and frontend/package-lock.json COPY package*.json ./ # Run npm install inside the container # Download and install dependencies from frontend/package.json # Create an /app/node_modules folder RUN npm install # Copy the source code and the configuration files # from the frontend folder into /app. # Skip the files that are listed in .dockerignore, # in our case that is the node_modules folder COPY . . # Expose the container's port EXPOSE 5173 # Specify the default commands to execute when the container starts CMD ["npm", "run", "dev"]

4. Create a frontend/.dockerignore file. To do that, go to the Project tool window, select New from the context menu of the frontend folder, select File from the list, and then type .dockerignore in the popup dialog that appears.

   Open the newly created frontend/.dockerignore file in the editor and add node_modules to it.

5. Create a docker-compose.yml file. To do that, go to the Project tool window, select New from the context menu of the project folder weather_dashboard, and then select Docker Compose File from the list.

   

   In the popup dialog that appears, type docker-compose.yml.

   

6. The docker-compose.yml file should ensure the following:

   • Build a backend image from ./backend

   • Builds a frontend image from ./frontend

   • Start the backend and the frontend containers

   • Connect the backend and the frontend containers

   Open the newly created docker-compose.yml file in the editor and paste the following code in it:

   services: # Define a service backend backend: # Build an image from the Dockerfile in the backend folder build: ./backend # Map the container's port 3000 to the host's port 3000 ports: - "3000:3000" # Bind mount between the folders on the host and in the container volumes: - ./backend:/app # Keep /app/node_modules inside Docker # Suppress replacing it with the host version - /app/node_modules # Define a service frontend frontend: # Build an image from the Dockerfile in the frontend folder build: ./frontend # Map the container's port 5173 to the host's port 5173 ports: - "5173:5173" # Set an environment variable inside the frontend container: environment: - VITE_API_URL=http://localhost:3000 # Bind mount between the folders on the host and in the container volumes: - ./frontend:/app # Keep /app/node_modules inside Docker # Suppress replacing it with the host version - /app/node_modules # Define a dependency on the backend service, which means: # Start the backend first # Then start the frontend depends_on: - backend

1. In the docker-compose.yml file, click next to services and select Run on Docker from the context menu.

   

   If everything is correct, you should see the following in the Services tool window:

   

2. Open your browser at http://localhost:5173/ to see the application running:

   

Update the Dockerfiles and the docker-compose.yml file

1. Open the backend/Dockerfile in the editor and update it as follows:

   • Below the EXPOSE 3000 line, add EXPOSE 9229.

   • Add the debug command as follows: CMD ["npm", "run", "dev", "debug"].

   As a result, your backend/Dockerfile should look as follows:

   FROM node:22-alpine WORKDIR /app COPY package*.json ./ RUN npm install COPY . . EXPOSE 3000 EXPOSE 9229 CMD ["npm", "run", "dev", "debug"]

2. Open the backend/package.json file and add a debug script, so the scripts property looks as follows:

   "scripts": { "dev": "tsx watch src/index.ts", "build": "tsc", "start": "node dist/index.js", "debug": "node --inspect=0.0.0.0:9229 src/index.ts" }

   The --inspect=0.0.0.0:9229 flag allows WebStorm to connect to Node.js inside the container and thus enables debugging on port 9229.

3. Open the docker-compose.yml file in the editor and add - "9229:9229" to the ports property under backend as follows:

   ports: - "3000:3000" - "9229:9229"

Start debugging the application in the container

1. Because we have updated the package.json and Dockerfiles, open the Services tool window and make sure the application is not running in the container. If it is, click Down.

2. Open the frontend/src/App.tsx file and set a breakpoint next to the return statement.

3. In the docker-compose.yml file, click next to services and select Run on Docker from the context menu.

4. Create a run/debug configuration of the type JavaScript Debug.

   1. Select Edit Configurations from the context menu of the Run widget.

   2. In the Run/Debug Configurations dialog that opens, click on the toolbar and select JavaScript Debug from the list.

   3. Specify the name of the configuration, for example, weather_frontend_docker.

   4. Specify the URL at which the frontend of your application is running. In this example, it is http://localhost:5173.

5. Select the newly created run/debug configuration from the list under the Run widget and click next to it.

6. In the Debug tool window, proceed as usual: step through the program, stop and resume program execution, examine it when suspended, explore the call stack and variables, set watches, evaluate variables, view actual HTML DOM, and so on.