So today I would like to show you how you can setup your Docker Container for your Vue 2/3 Project.

Firstly setup your Vue Project through the Vue CLI with the following line in your terminal.


vue create vue-project-name
cd vue-project-name

once that has finished processing you can serve it to check that all is working.

npm run serve


After that go into your project directory and make a file called Dockerfile and copy and paste the following.

Then in the root of your project make another folder called ‘.nginx’ and a file in there called ‘nginx.conf’
like so:

then in nginx.conf copy and paste the following.

So what this is doing is setting up a nginx webserver and exposing port 8080 the same port in the Dockerfile, and important to note the following.

include /etc/nginx/mime.types

This allows nginx to render your vue application otherwise everything will render as plain text

and location / {
try_files $uri /index.html;
}

This will make sure you can reload your routes when you eventually start using vue router in your project, without this you won’t be able to refresh a route or directly navigate to a route in the URl without getting a 404 or application error.