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 [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~prestart: [email protected]
npm info lifecycle [email protected]~start: [email protected]

> [email protected] 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 [email protected]
npm info using [email protected]
npm info lifecycle [email protected]~prestart: [email protected]
npm info lifecycle [email protected]~start: [email protected]

> [email protected] 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