comparing woocommerce vs squrespace vs shopify vs wix

Comparing WooCommerce vs Squarespace vs Shopify vs Wix in 2020

Nov 2, 2020

Prioritising Tasks And Skills

Nov 16, 2020

How To Setup Docker/Nginx For Your Vue CLI Project

Published by Mitchell Yuen

Tags

how to setup docker/nginx for your vue cli project

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.

Comparing WooCommerce vs Squarespace vs Shopify vs Wix in 2020

Prioritising Tasks And Skills

How To Setup Docker/Nginx For Your Vue CLI Project

Contact us

Related posts:

Mitchell Yuen

Leave a Reply Cancel reply