amrbz amrbz - 2 months ago 18
Node.js Question

Docker + Nodejs + Brunch + ReactJS image

I'm trying to setup my development environment just installing Docker on my laptop. First container that I'm going to create is Node.js + Brunch.io + ReactJS.

On my Ubuntu 16.04 host I've created a directory

mkdir /home/username/Development/projectname/


Inside of projectname folder I've cloned the brunch/with-react skeleton repo by running

git clone https://github.com/brunch/with-react.git www


Inside of www directory created a Dockerfile

FROM node:6.3.1

RUN apt-get update && apt-get install --yes npm
WORKDIR /opt

COPY package.json /opt
RUN npm install

COPY . /opt
RUN npm install -g brunch/brunch
RUN brunch build

EXPOSE 3333

CMD ["npm", "start"]


Build the image launching

docker build . -t brunch


Then I start the container by running:

docker run -d -P --name web brunch


Checking the logs

docker logs web


And the output says that the server is launched and listening on port 3333

npm info it worked if it ends with ok
npm info using npm@3.10.3
npm info using node@v6.3.1
npm info lifecycle projectname_www@0.0.1~prestart: projectname_www@0.0.1
npm info lifecycle projectname_www@0.0.1~start: projectname_www@0.0.1

> projectname_www@0.0.1 start /opt
> brunch watch --server

04 Aug 04:48:34 - info: application started on http://localhost:3333/
04 Aug 04:48:35 - info: compiled 174 files into 3 files, copied index.html in 2.5 sec


Checking running container statuses

docker ps


The output

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
efd43b57c23f brunch "npm start" 3 seconds ago Up 2 seconds 0.0.0.0:32771->3333/tcp web


Launching web browser on

http://localhost:32771


But the page is not loading. Screenshot.

What am I doing wrong?

**** EDIT ****

[SOLVED] ALTERNATIVE WAY

Dockerfile

FROM node:6.3.1

RUN apt-get update && apt-get install --yes npm
WORKDIR /opt

COPY package.json /opt
RUN npm install

EXPOSE 3333


Inside www directory update brunch-config.js file:

module.exports = {
files: {
javascripts: {
joinTo: {
'vendor.js': /^(?!app)/,
'app.js': /^app/
}
},
stylesheets: {joinTo: 'app.css'}
},
server: {
hostname: '0.0.0.0'
},
plugins: {
babel: {presets: ['es2015', 'react']}
}
};


Running container from www directory:

docker run -P -it -v $PWD:/opt/app/ brunch bash


This will mount a host volume to container and run it.

~/Development/brunch(branch:master*) » docker run -P -it -v $PWD:/opt/app/ brunch bash

root@e0fd2c6bfa66:/opt/app#


Run following commands

npm install -g brunch/brunch
brunch build
npm start


You will see the output

npm info it worked if it ends with ok
npm info using npm@3.10.3
npm info using node@v6.3.1
npm info lifecycle your-app@0.0.1~prestart: your-app@0.0.1
npm info lifecycle your-app@0.0.1~start: your-app@0.0.1

> your-app@0.0.1 start /opt/app
> brunch watch --server

07 Sep 19:00:41 - info: application started on http://127.0.0.1:3333/ (lo)
07 Sep 19:00:41 - info: application started on http://172.17.0.2:3333/ (eth0)
07 Sep 19:00:43 - info: compiled 174 files into 3 files, copied index.html in 2.8 sec


Open another terminal window and run

docker ps


The output should look like this

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
e0fc2d6bfa66 brunch "bash" 14 minutes ago Up 14 minutes 0.0.0.0:32771->3333/tcp berserk_albattani


Open your browser

http://localhost:32771


In this way it is possible to use node.js inside docker container and at the same time store the project files on local host.

If container is already created but stopped, to launch it run

docker exec -it container_name bash
npm start

Answer

Inside brunch-config you have to set

  server: {
      hostname: '0.0.0.0'
  },
Comments