Webpack

Installation

First, install dependencies from the webpack project directory with

 
1
npm install

After installation, you can use npm start to start up a development server at http://localhost:8080/.

Calcite Components with Webpack

To install calcite components, first run:

 
1
npm install --save @esri/calcite-components

After calcite-components is installed, import the loader in your src/index.js file:

    
1
2
3
4
import {
  applyPolyfills,
  defineCustomElements
} from "@esri/calcite-components/dist/loader";

Adding the CSS

The global calcite components CSS can be added by importing the calcite.css file. This will require you set up a css loader in your Webpack config (see Config > CSS below):

 
1
import "@esri/calcite-components/dist/calcite/calcite.css";

Config

Calcite components will need to be copied over to your output folder for Stencil to load them properly from the client. The easiest way to do this is to utilize the copy-webpack-plugin. First install:

 
1
npm install --save-dev copy-webpack-plugin

Then import the plugin in your webpack.config.js file and call it inside the plugins array:

             
1
2
3
4
5
6
7
8
9
10
11
12
13
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  plugins: [
    new CopyPlugin({
      patterns: [{
        from: '**',
        context: 'node_modules/@esri/calcite-components/dist/calcite/',
        to: './',
      }]
    }),
  ],
};

This will ensure the library is available to your JavaScript.

CSS

While we imported CSS file above, we need to output a CSS file in the final bundle. To do this, you can leverage the mini-css-extract-plugin.

First, install the required plugins and loaders:

 
1
npm install --save-dev mini-css-extract-plugin css-loader

Then add them to your config:

              
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ],
      }
    ]
  },
}

You can see this example projects webpack.config.js for a complete config with dev server and html loading.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.