How to run bpmn-js app in a docker-container?

hello,
from the bpmn-examples I want to run the custom-elements example in a docker container. For that I already installed docker in my Linux-OS and I have created a Dockerfile and docker-compose.yml
Dockerfile looks as follows:

FROM node:latest
WORKDIR /usr/src/app
ADD . .
COPY package.json .
COPY Gruntfile.js .
COPY .babelrc .
COPY .gitignore .
COPY .npmrc .
RUN npm install
COPY . /usr/src/app
COPY . ./
# replace this with your application's default port
EXPOSE 8000
CMD [ "npm", "run dev" ]

and docker-compose.yml looks as this:

version: "2"

services:
  web:
    build: .
   # command: nodemon -L --inspect=0.0.0.0:5858
    volumes:
      - .:/code
    ports:
      - "8000:8000"
  #    - "5858:5858"

are the files correct? In Gruntfile.js I have set the port to 8000, therefore I did the same in the docker files. How can I start the docker-container, if they are correct ? It should finally be reachable on: localhost:8000. This is my first try with docker, so I am absolutely beginner with it.
Thanks in advance

Hi,

if you have Docker related questions, you should ask in a Docker forum :wink:

However:

  1. You don’t need to run docker-compose since you only require to run 1 container (single container app)
  2. Can you please link the example that you are trying to run since custom-elements is an overview only linking to other actually runnable examples.

Regards

Hello,

It based on custom controls example. I extended package.json a little bit in order to use Gruntfile instead of webpack

As @maxtru stated out, I’m not sure whether you find docker specific help here, since this project is not related to Docker. We can just try to help, but can’t give guarantees.

are the files correct?

What happens when you execute those? How is your Gruntfile look like? Can you post your code inside a CodeSandbox so we can inspect it?

Hi @vdeppe,

Ok.

I think you should start with a basic Docker tutorial, we only need a very simple Dockerfile here
It should work like this:
Clone https://github.com/bpmn-io/bpmn-js-example-custom-controls by running

git clone git@github.com:bpmn-io/bpmn-js-example-custom-controls.git
cd bpmn-js-example-custom-controls

Edit the dev script line in package.json so that webpack-dev-server makes the application available externally:

...
   "dev": "webpack-dev-server --content-base=public --open --host 0.0.0.0",
...

Set up a very simple Dockerfile:

# Copy node
FROM node:latest

# Create some working directory for our app
WORKDIR /usr/src/bpmn-js-custom-elements-app

# Copy the entire app to the Docker image
COPY . .

# Export the webdev port
EXPOSE 8080

# Run npm start
CMD [ "npm", "start" ] 

Build the docker image and start a container

docker build -t username/custom-elements-example-docker .
docker run -p 8080:8080 -d username/custom-elements-example-docker

=> You can now access the example via your browser under localhost:8080

Find the running container using

docker ps

Best,
Max

Thank you. Do I need to set port in webpack.config, too? And can I use the same configuration with Gruntfile? I have some other projects which are configured with Gruntfile and I want to dockerize them too. Further more, I think you mean CMD[ [„npm“],[„run“],[„dev“] ] as I use dev in scripts tag?

Do I need to set port in webpack.config, too

webpack.config.js doesn’t need any change. Also note that I didn’t change the default port in the example I described. I only exposed port 8080 of the running container to the port 8080 on the host machine starting that container.

And can I use the same configuration with Gruntfile? I have some other projects which are configured with Gruntfile and I want to dockerize them too.

Sure, there is no reason why you would not be able to use grunt in a dockerized app. The configuration stays in principle the same.

Further more, I think you mean CMD[ [„npm“],[„run“],[„dev“] ] as I use dev in scripts tag?

No, in the example I described I intentionally wanted to run npm start which is the intended script in the package.json to start the example. But technically this does start the dev script anyhow, so you could also do CMD [ "npm", "run", "dev" ] with the same result.

Best,
Max