Vuetify 3 TypeScript Tutorial Series -Part 12

7 min readFeb 29, 2024

In Part 11 of this tutorial series, we covered the following steps:

Wrote tests for getTasks.ts
Wrote tests for removeTask.ts
Go through shortcuts command

If you missed Part 11, you can find it here: Part 11

Deploy Vuetify web app

It is time to deploy the Vuetify 3 app, so let us first dockerize the Vuetify app by creating a Dockerfile in the root directory:

Add these lines to your Dockerfile :

# Use Node.js LTS version with Alpine as base image for the build stage
FROM node:lts-alpine as build-stage
# Set the working directory to /app inside the container
WORKDIR /app
# Copy package.json and package-lock.json (if available) to /app
COPY package*.json ./
# Globally install pnpm inside the container
RUN npm install -g pnpm
# Install project dependencies using pnpm
RUN pnpm install
# Copy all other files from the project directory to /app
COPY . .
# Run the build command as defined in package.json
RUN pnpm build


# Use stable Nginx on Alpine as base image for the production stage
FROM nginx:stable-alpine as production-stage
# Copy custom nginx.conf to the Nginx config folder in the container
COPY nginx.conf /etc/nginx/nginx.conf
# Copy built Vue app from build-stage to Nginx's serving directory
COPY --from=build-stage /app/dist /usr/share/nginx/html


 # Start Nginx with daemon off (Nginx runs in the foreground)
CMD ["nginx", "-g", "daemon off;"]

Then create the .dockerignore also in the root directory:

Then add these lines to ignore in .dockerignore :

node_modules
dist

So the dist & node_modules packages will be ignore when building Docker image.

Then create the nginx.conf also in the root directory:

Then add these lines to our nginx.conf file:

# Set 'nginx' user for the Nginx process
user  nginx;
# Use 1 worker process for handling requests
worker_processes  1;
# Set the path and log level for the error log file
error_log  /var/log/nginx/error.log warn;
# Set the file path of the Nginx process ID
pid        /var/run/nginx.pid;
# Event module settings
events {
  # Set the maximum number of simultaneous connections per worker process
  worker_connections  1024;
}
# HTTP server settings
http {
  # Include mime types defined in this file
  include       /etc/nginx/mime.types;
  # Default MIME type for responses
  default_type  application/octet-stream;
  # Format for the access log
  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
  # Path for the access log
  access_log  /var/log/nginx/access.log  main;
  # Enable sending files directly to the client
  sendfile        on;
  # Timeout for keeping connections open
  keepalive_timeout  65;
  # Server block configuration
  server {
    # Listen on port 8080
    listen       8080;
    # Define server name (here set to localhost)
    server_name  localhost;
    # Location block for root URL
    location / {
      # Set root directory for requests
      root   /usr/share/nginx/html;
      # Set the file to serve as index
      index  index.html;
      # Try to serve file directly, if not found, serve index.html
      try_files $uri $uri/ /index.html;
    }
    # Define error pages for various errors
    error_page   500 502 503 504  /50x.html;
    # Location block for error pages
    location = /50x.html {
      # Root directory for error pages
      root   /usr/share/nginx/html;
    }
  }
}

The nginx.conf file in the Vue project configures an Nginx web server to serve your Vue.js application. It specifies that the server listens on port 8080 and serves static files from the /usr/share/nginx/html directory. Additionally, it includes directives for handling HTTP requests, logging, and managing error pages, ensuring that requests to your Vue.js app are correctly routed and served, even if a specific file is not found (falling back to index.html, which is a common setup for single-page applications like those built with Vue.js).

Create the Docker image

In order to create a Docker image, make sure Docker desktop is running on your device and enter this command in the Terminal:

docker build -t task-app-frontend .

docker build: This is the Docker command to build a new image.
-t task-app-frontend: The -t flag assigns a tag to the image, which in this case is task-app-frontend. Tags are used to identify different versions of an image.
.: This specifies the location of the Dockerfile and the context of the build. The . means the current directory, indicating that Docker should look for the Dockerfile here and use the files in this directory as the build context.

Essentially, this command tells Docker to build an image named task-app-frontend using the Dockerfile in the current directory.

In Docker desktop you should see this:

Then start the container by entering in the Terminal:

docker run -d -p 9091:8080 --name task-app-fe task-app-frontend

The command docker run -d -p 9091:8080 --name task-app-fe task-app-frontend is used to run a Docker container from the image task-app-frontend:

docker run: This command is used to run a Docker container.
-d: This flag runs the container in detached mode, meaning the container runs in the background and does not block the terminal.
-p 9091:8080: This flag maps port 9091 of the host to port 8080 of the container. When you access port 9091 on your host machine, Docker will forward this request to port 8080 of the container.
--name task-app-fe: Assigns the name task-app-fe to the running container. This name can be used to reference the container in future Docker commands.
task-app-frontend: Specifies the image from which the container should be created. This is the image name tagged previously during the build process.

In summary, this command starts a new container named task-app-fe from the task-app-frontend image, runs it in the background, and maps the host's port 9091 to the container's port 8080.

Then take a look at Docker desktop at containers:

After that open your web browser and enter the following URL: http://localhost:9091/

Deployment on a web server

In order to deploy the Vuetify web app on an web server we need to push our Docker image task-app-frontend to Docker Hub, so make sure you have an account there.

Enter the following command in the Terminal:

docker login

Then tag the image with your Docker user name:

docker tag task-app-frontend:latest {your-user}/task-app-frontend

docker image tagging

docker tag: This is the command used to create a new tag for a Docker image.
task-app-frontend:latest: This specifies the existing image that you want to tag. In this case, it's referring to the task-app-frontend image with the latest tag. This is the source image.
habibicoding/task-app-frontend: This is the new tag being created for the image. It typically includes a username (in this case, habibicoding) and the repository name (here, task-app-frontend). This format is commonly used for pushing images to Docker registries like Docker Hub.

In summary, this command creates a new tag habibicoding/task-app-frontend for the existing task-app-frontend:latest Docker image. This is often a step before pushing the image to a Docker registry under a specific account or organizational space.

Then check if the tagged image was created:

docker images

After that push the new tagged image to your Docker hub repository:

docker push {your-user}/task-app-frontend

Next, open a web browser and type: https://hub.docker.com/r/{your-user}/task-app-frontend

Now, I will connect to my web server and pull the image from Docker Hub. I already have set up Nginx with my domain. If you are interested in these topics check this tutorial series on YouTube out:

Or my Medium articles: https://medium.com/geekculture/linode-tutorial-part-1-setting-up-a-domain-ubuntu-and-nginx-reverse-proxy-for-multiple-routes-1f92703ba0ed

On my web server I just pull the image now:

docker pull {your-user}/task-app-frontend

Then enter again the command to start the container:

docker run -d -p 9091:8080 --name task-app-fe {your-user}/task-app-frontend

start container

Then you should be able to see your app by typing your domain in the web browser:

Congratulations | Mabrook | مبروك you have completed the ENTIRE TUTORIAL SERIES!!!

You should be proud of yourself! If you enjoyed this article, give it a clap.

You can also check out the article in video format on YouTube at: https://www.youtube.com/watch?v=YajNE5-gg1E&list=PLjuEK3Ez60n3-ys_uT3ps14kS9k6nkAiw

Here is the source code on GitHub: https://github.com/habibicoding/task-app-vuetify-medium/tree/part-twelve

Vuetify 3 TypeScript Tutorial Series -Part 12

In Part 11 of this tutorial series, we covered the following steps:

Deploy Vuetify web app

Create the Docker image

Deployment on a web server

Written by Habibi Coding | حبيبي كودنق