npm install doesnt create dist folder

Question

I am following this tutorial link to create a grafana plugin.

But when I copy this code link from the tutorial to my test server(without the dist/ folder) and run npm install npm doesn’t create a new dist/ folder instead it creates a node_modules folder.

Am I missing a step here or am I understanding something incorrect? Since I expected that command to create a dist/ folder out of the files in the src/ folder?

The grunt file:

module.exports = (grunt) => {
  require('load-grunt-tasks')(grunt);

  grunt.loadNpmTasks('grunt-execute');
  grunt.loadNpmTasks('grunt-contrib-clean');

  grunt.initConfig({

    clean: ['dist'],

    copy: {
      src_to_dist: {
        cwd: 'src',
        expand: true,
        src: ['**/*', '!**/*.js', '!**/*.scss'],
        dest: 'dist'
      },
      pluginDef: {
        expand: true,
        src: [ 'plugin.json', 'README.md' ],
        dest: 'dist',
      }
    },

    watch: {
      rebuild_all: {
        files: ['src/**/*', 'plugin.json'],
        tasks: ['default'],
        options: {spawn: false}
      },
    },

    babel: {
      options: {
        sourceMap: true,
        presets: ['es2015'],
        plugins: ['transform-es2015-modules-systemjs', 'transform-es2015-for-of'],
      },
      dist: {
        files: [{
          cwd: 'src',
          expand: true,
          src: ['*.js'],
          dest: 'dist',
          ext: '.js'
        }]
      },
    },

  });

  grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'babel']);
};

The package.json:

{
  "name": "clock-panel",
  "version": "1.0.0",
  "description": "Clock Panel Plugin for Grafana",
  "main": "src/module.js",
  "scripts": {
    "lint": "eslint --color .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "clock",
    "grafana",
    "plugin",
    "panel"
  ],
  "author": "Raintank",
  "license": "MIT",
  "devDependencies": {
    "babel": "~6.5.1",
    "babel-eslint": "^6.0.0",
    "babel-plugin-transform-es2015-modules-systemjs": "^6.5.0",
    "babel-preset-es2015": "^6.5.0",
    "eslint": "^2.5.1",
    "eslint-config-airbnb": "^6.2.0",
    "eslint-plugin-import": "^1.4.0",
    "grunt": "~0.4.5",
    "grunt-babel": "~6.0.0",
    "grunt-contrib-clean": "~0.6.0",
    "grunt-contrib-copy": "~0.8.2",
    "grunt-contrib-uglify": "~0.11.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-execute": "~0.2.2",
    "grunt-systemjs-builder": "^0.2.5",
    "load-grunt-tasks": "~3.2.0"
  },
  "dependencies": {
    "lodash": "~4.0.0",
    "moment": "^2.12.0"
  }
}

Wegner

Not sure if this will help anyone, but I was manually copying files from an existing project to a new one and forgot to copy over index.js, which had the code for bundling into dist with serve-static. Was following this tutorial – Taddeo

Answer 1

You are missing running grunt default task

You should run:

npm install (which installs your dependencies), followed by a grunt (which copies src files to dist as you can see in the Gruntfile.js copy:src_to_dist task)

So in short just run: $ npm install && grunt

Dunbarton

Answer 2

npm install command installs packages that your project will be using as dependencies. It will create the node_modules directory in your current directory (if one doesn't exist yet), and will download the package to that directory.

Athene

npm install has nothing to do with creating (or failing to create) the dist folder, which is what OP is asking about. – Copley

@mrodo, well actually, there is a prepublish feature which is sometimes used to move files to the dist folder. – Mike

Answer 3

Actually, running an npm install will also execute the prepublish of your package.json if there is one.

For your needs, it sounds like you want to do this:

  "scripts": {
    "build": "grunt",
    "prepublish": "npm run build"
  },

Mike