Tutorial: deploy your application to a minikube cluster

Create an empty project with Node.js

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

2. In the dialog that opens, select Node.js in the left-hand pane.

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

4. Specify the local Node.js runtime to use. Accept the suggested installation or select another one from the list, or even click Download if you do not have Node.js on your machine yet. Learn more from Create a new Node.js application.

   

5. Click Create.

Populate the application

1. Let us create a separate folder for our application, this will help us later map local folders to folders in the container.

   To do that, open the Project tool window Alt+1, right-click the project folder, select New from the context menu, and then select Directory. In the popup dialog that appears, specify the name of the folder, for example, app.

   

2. Now it is time to create a JavaScript file to place the code of our application in.

   From the context menu of the app folder, select New from the context menu, and then select JavaScript File.

   

   In the popup dialog that appears, specify the name of the file, for example, hello_express.js.

   

3. Open the newly created hello_express.js file in the editor and type the following code:

   const express = require('express'); const app = express(); app.get('/', function(req, res) { res.send('Hello World!') }); app.listen(3000,function() { console.log('Example app listening on port 3000!') });

4. As you might have expected, the express reference is not resolved and highlighted as an error. However, WebStorm suggests a quick-fix as you hover over the reference:

   

   When you click the Install 'express' link, express is added to the package.json file and installed.

   

Run the application locally

Let us run our application locally to make sure it works as expected.

• Open the hello_express.js file, right-click anywhere in the editor tab, and select Run 'hello_express.js' from the context menu.

  

  The Run tool window opens showing Example app listening on port 3000!.

  If you open the browser at http://localhost:3000, you will see that the page shows Hello World!, as expected.

  

Create a Dockerfile

1. From the context menu of the project folder, select New from the context menu, and then select Dockerfile.

   

2. Open the newly created Dockerfile and type the following code:

   FROM node:22-alpine WORKDIR /tmp COPY package*.json . RUN npm ci --omit=dev COPY ./app/ ./app/ CMD ["node","./app/hello_express.js"]

   This Dockerfile contains instructions for building an image based on the node:22 image from Docker Hub.

   When you run a container from this image, Docker sets copies the contents of the /app/ directory to the /tmp/app/ directory in the container (in our case, the /app/ directory contains the hello_express.js file). The package.json file is copied to /tmp/.

   Then Docker sets the current working directory to /tmp and runs node ./app/hello_express.js. As a result, the container log should show Example app listening on port 3000!.

Build the Docker image

1. Form the Project view, open Dockerfile in the editor.

2. Edit the file:

   • Change

     ENV RAILS_ENV="production" \ BUNDLE_DEPLOYMENT="1" \ BUNDLE_PATH="/usr/local/bundle" \ BUNDLE_WITHOUT="development"

     to

     ENV RAILS_ENV="development" \ BUNDLE_PATH="/usr/local/bundle"

   • Change

     EXPOSE 80 CMD ["./bin/thrust", "./bin/rails", "server"]

     to

     EXPOSE 3000 CMD ["./bin/rails", "server", "-b", "0.0.0.0", "-p", "3000"]

3. In the gutter inside the Dockerfile, click and select New Run Configuration.

   

4. In the Edit Run Configuration dialog, specify hello-world-docker-app in the Image tag field and hello-world-docker in the Container name field. Then, click Run.

   

WebStorm creates a Dockerfile run configuration, which builds an image from the Dockerfile and then runs a container based on that image. To follow the whole process, open the Build Log tab in the Services tool window.

Start minikube with the Docker driver

1. Open the Terminal tool window: go to View | Tool Windows | Terminal or press Alt+F12.

2. Run the following command to start a local Kubernetes cluster and instruct minikube to use Docker as the virtualization driver:

   minikube start --driver=docker

3. Verify that your cluster is up and running by using the command:

   minikube status

Add the minikube cluster to WebStorm

1. Open the Services tool window: go to View | Tool Windows | Services or press Alt+8.

2. Select the Kubernetes node, click the Add Cluster button, and then select From Default Directory from the context menu.

   

3. In the Add Clusters dialog, select minikube and click Add Clusters.

   

   The added cluster will become available in the Services tool window.

4. In the Services tool window, right-click the minikube cluster and select Connect Cluster.

   

Load the Docker image into minikube

1. Open the Terminal tool window: go to View | Tool Windows | Terminal or press Alt+F12.

2. Run the following command to build the container image in minikube:

   minikube image load <image tag>

   where <image tag> is the value specified in the Run/Debug configuration as described above. In our example it should be:

   minikube image load hello-world-docker-app

3. Validate that the hello-world-docker-app image is available in your cluster by running:

   minikube image ls | grep hello-world-docker-app

   You should see docker.io/library/hello-world-docker-app:latest in the output.

Create a Deployment manifest

1. In the Project tool window (Alt+1) , right-click the project name and select New | Kubernetes Resource.

   

2. In the New Kubernetes Resource dialog, select the Deployment file type, specify hello-world-docker-deployment as the manifest name, and press Enter.

   

   If prompted, agree to add the file to Git.

3. Replace the content of the resulting file with the following code:

   apiVersion: apps/v1 kind: Deployment metadata: name: hello-world-docker labels: app: hello-world-docker spec: replicas: 1 selector: matchLabels: app: hello-world-docker template: metadata: name: hello-world-docker labels: app: hello-world-docker spec: containers: - name: hello-world-docker image: hello-world-docker-app imagePullPolicy: IfNotPresent ports: - containerPort: 3000 protocol: TCP restartPolicy: Always

4. On the floating toolbar, select the current cluster and namespace, then click Apply to deliver the changes to the local cluster.

   

Create a Service manifest

1. In the Project tool window (Alt+1) , right-click the project name and select New | Kubernetes Resource.

   

2. In the New Kubernetes Resource dialog, select the Service file type, specify hello-world-docker-service as the manifest name, and press Enter.

   

   If prompted, agree to add the file to Git.

3. Replace the content of the resulting file with the following code:

   apiVersion: v1 kind: Service metadata: name: hello-world-docker spec: selector: app: hello-world-docker ports: - protocol: TCP port: 3000 targetPort: 3000 type: NodePort

4. On the floating toolbar, select the current cluster and namespace, then click Apply to deliver the changes to the local cluster.

Access the application

1. Open the hello-world-docker-deployment.yaml file in the editor.

2. Click the Forward Ports inlay hint next to the - containerPort: 3000 property.

   

3. In the Forward Ports dialog, leave the default values and click Forward.

4. In the hello-world-docker-deployment.yaml file, click the Open in Browser inlay hint.

   

   WebStorm redirects you to your default browser, where you can check your application that is just deployed in your local minikube cluster.