how can I run a web-app with a docker-container?

I have a simple web-app, with an index.html, app.js and package.json files.
Now, I want to run it via a docker-container. On my local machine, I can run the app with npm install and then npm start.
When I try to run it via docker-compose up, I get the following error message:

Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?
If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable

My Dockerfile looks as follows:

FROM node:8.11
WORKDIR /usr/src/app
ARG NODE_ENV
ENV NODE_ENV $NODE_ENV
COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app
    
# 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:
      - .:/usr/src/app
    ports:
      - "8000:8000"
      - "5858:5858"

Actually, the app should run under localhost:8000 or under localhost:5858 for debug-mode.

Any idea what is wrong with Dockerfile or the docker-compose.yml? I already tried the fixes described here, but both suggestions don't work for me, so there must be something else wrong.

Thanks in advance and kind regards.
PS: If you need more code, please feel free to tell me and I add it to the question.

Update: the package.json looks as follows:

{
  "name": "custom-meta-model",
  "version": "0.0.0",
  "description": "An bpmn-js modeler extended with a custom meta-model",
  "main": "app/index.js",
  "scripts": {
    "all": "grunt",
    "dev": "grunt auto-build"
  },
  "keywords": [
    "bpmnjs-example"
  ],
  "author": {
    "name": "Nico Rehwaldt",
    "url": "https://github.com/nikku"
  },
  "contributors": [
    {
      "name": "bpmn.io contributors",
      "url": "https://github.com/bpmn-io"
    }
  ],
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babelify": "^8.0.0",
    "grunt": "^1.2.0",
    "grunt-browserify": "^5.3.0",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-contrib-connect": "^2.1.0",
    "grunt-contrib-copy": "^1.0.0",
    "load-grunt-tasks": "^5.1.0",
    "stringify": "^5.2.0"
  },
  "dependencies": {
    "bpmn-js": "^7.2.0",
    "diagram-js": "^6.6.1",
    "jquery": "^3.5.1"
  }
}

Update 2: It looks a bit better now, I corrected the CMD-Command in Dockerfile. Now the output tells me that 'grunt' was not found. Concrete:

Step 9/9 : CMD [ "npm", "run", "dev" ]
 ---> Running in f51692a86908
Removing intermediate container f51692a86908
 ---> 53e88bbb46c4
Successfully built 53e88bbb46c4
Successfully tagged overlayexample2_web:latest
Recreating overlayexample2_web_1
Attaching to overlayexample2_web_1
web_1  | 
web_1  | > [email protected] dev /usr/src/app
web_1  | > grunt auto-build
web_1  | 
web_1  | sh: 1: grunt: not found
web_1  | npm ERR! code ELIFECYCLE
web_1  | npm ERR! syscall spawn
web_1  | npm ERR! file sh
web_1  | npm ERR! errno ENOENT
web_1  | npm ERR! [email protected] dev: `grunt auto-build`
web_1  | npm ERR! spawn ENOENT
web_1  | npm ERR! 
web_1  | npm ERR! Failed at the [email protected] dev script.
web_1  | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
web_1  | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
web_1  | 
web_1  | npm ERR! A complete log of this run can be found in:
web_1  | npm ERR!     /root/.npm/_logs/2020-08-21T17_03_50_937Z-debug.log
overlayexample2_web_1 exited with code 1

How can I fix it?

Maybe the Gruntfile.js has to be modified, currently it looks like this:

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt);
  grunt.loadNpmTasks('grunt-docker');

  grunt.initConfig({

    browserify: {
      options: {
        transform: [
          [ 'stringify', {
            extensions: [ '.bpmn' ]
          } ],
          [ 'babelify', {
            global: true
          } ]
        ]
      },
      watch: {
        options: {
          watch: true
        },
        files: {
          'dist/index.js': [ 'app/**/*.js' ]
        }
      },
      app: {
        files: {
          'dist/index.js': [ 'app/**/*.js' ]
        }
      }
    },
    copy: {
      diagram_js: {
        files: [ {
          src: require.resolve('diagram-js/assets/diagram-js.css'),
          dest: 'dist/css/diagram-js.css'
        } ]
      },
      app: {
        files: [
          {
            expand: true,
            cwd: 'app',
            src: ['**/*.*', '!**/*.js'],
            dest: 'dist'
          }
        ]
      }
    },
    watch: {
      options: {
        livereload: false
      },

      samples: {
        files: [ 'app/**/*.*' ],
        tasks: [ 'copy:app' ]
      },
    },

    connect: {
      livereload: {
        options: {
          port: 8000,
          livereload: true,
          hostname: '*',
          open: false,
          base: [
            'dist'
          ]
        }
      }
    }
  });

  // tasks

  grunt.registerTask('build', [ 'browserify:app', 'copy' ]);

  grunt.registerTask('auto-build', [
    'copy',
    'browserify:watch',
    'connect:livereload',
    'watch'
  ]);

  grunt.registerTask('default', [ 'build' ]);
};

Upvotes: 3

how can I run a web-app with a docker-container?

Answers (3)

Related Questions