Creating simple Node.js and Vue.js development environment using Docker

I wanted to do so experiments with node.js and vue.js, but I do not want to install development tools on my new laptop, so I could keep it clean for, well, a bit longer time. So decided that it is a good time to learn docker a bit also. Idea is I can create and use everything from docker container that is create from some docker image. Things I have learned about docker so far:

Image – that is a prebuilt thing – package or template to create container.

Container – package of applications created from Image and running on host virtual machine isolated from it by Docker engine.

Volumes – it is a storage for container. You can create named volumes that ar managed by docker and host volumes, that basically map directory on host to container.

Network – you can create networks and attach container to it.

So, first thing first, I have a clean pc (or Mac in my case). Only development tool I have is vscode editor. I want to create container from some image that would have npm, map it to project folder on a host, using npm install everything I need to create vue project. First You have to install docker itself, do it according to docker instructions for your os.

Check if docker is available in command line, create and move to project folder.

docker -v

mkdir vue-project
cd vue-project

docker run --rm --volume ${PWD}:/app --workdir /app --interactive --tty  node:18-alpine sh -c "npm install -g vue-cli && vue init webpack ." 

Last command means we want to run docker container from node:18-alpine image. If we don’t have that image, it will be downloaded automatically.

–rm mean we want to remove container automatically after it finisher execution.

–volume ${PWD}:/app means we want to map current folder ( that is our project folder ) to /app folder within container.

–workdir /app means we want to set working directory to /app within container automatically.

–interactive means we want interactivity 🙂

–tty means we want to use our terminal to interact with container ( remember it is interactive now ? ) 🙂

node:18-alpine is name of the image we want to use.

sh -c means we want to run shell command

npm install -g vue-cli will install vue command line interface in our container.

vue init webpack . will start vue web pack project template initialisation in out project folder, its is interactive follow questions.

If everything went well, now our folder has vue project from web pack template.

Now we would like to have docker container that would run the code, code changes would be reflected in container and we would be able to open web app in browser. For that we will use docker-compose.

Let’s create Docker-compose.yml in our project folder with vscode:

version: "3.8"

    image: node:18-alpine
    command: sh -c "npm install && npm run dev"
      - 8080:8080
    working_dir: /app
      - ./:/app

In service section we describe app service that uses node:18-alpine image, executes command npm install and amp run dev for our project within container, maps local port 8080 to port 8080 in container, sets working dir to /app in container and maps curren dir to /app dir in container.

To start everything, use

docker-compose up

After running it you should see

Your application is running here: http://localhost:8080

Unfortunately for me it failed to open webpage. First thing I have entered the container shell to see if it is running there:

docker ps
docker exec -it <our container id>  sh 
wget -qO- http://localhost:8080

After wget I got some html sources, so webpage is running within container, probably issue is with map or app itself. After some googling I have found that we are actualy listening on localhost only. To be reachable from outside replace the following line in your package.json file:

"start": "webpack-dev-server --inline --content-base ."

by :

"start": "webpack-dev-server --host --inline --content-base .”

And after

docker-compose down
docker-compose up

Web page was accessible on a host machine

After changing “Welcome to Your Vue.js App” to “Welcome to Your Vue.js DEMO App” in HelloWorld.vue, it was changed automatically in browser, so everything works.

Other useful commands

docker-compose up -d
docker-compose ps
docker ps
docker rm -f <container id>
docker stop <container id>


Be the first to comment

Leave a Reply

Your email address will not be published.