How To Set Up D3.js with webpack and babel
Before you begin, make sure you have node and npm installed. Use a node version higher than 6. Also, note that all terminal commands are for Mac. Please use the equivalent commands for your OS.
The repository for this tutorial lives here
The other day I was setting up a D3.js project when I ran into the classic developer conundrum — if I wanted to set up the project without using a CDN, I’d need to learn a couple of other auxiliary technologies. I had been meaning to learn to use webpack anyways, so I was happy to find a reason to get a jump on it. I didn’t find an existing tutorial for these three technologies, so thought I would share how I set up my project with you!
Here we go!
Step 1: Set up your package.json file.
- Create a new directory for this project.
- While inside of your directory, type
npm initinto your terminal.
Follow the steps that appear on your screen. For the sake of this tutorial, it’s perfectly fine to use the defaults each time. Once you have done that, take a look at your
package.json file. This is what mine looks like:
Yours should look similar, but with whatever information you have inputted, rather than the information I inputted!
Step 2: Install Webpack
npm install webpack webpack-dev-serverinto your terminal.
- Create a webpack configuration file by typing
touch webpack.config.jsinto your terminal.
- Then, copy the code below into your
As you can see above, you’ve specified an
entry and an
- In this case, the input is an
index.jsfile that lives inside of a
- The loaders allow you to require other build tools. In this case, we are going to be loading Babel.
Step 3: Install Babel
npm install --save-dev babel-cliinto your terminal.
- Once you’ve finished installing, your
package.jsonfile will look like this:
- Add a build script to your npm scripts by adding these lines to your
"build": "babel src -d lib". It should look like this:
npm install babel-loader babel-core babel-preset-es2015. This will allow us to load all of the dependencies we need to get this working.
We will then need to create a
.babelrcfile. To do so, type
touch .babelrcinto your terminal.
npm install babel-preset-env --save-devinto your terminal and add these lines to your
Step 4: Set up the Structure of your Application
- Create a folder called
mkdir srcin your terminal.
- Create a new file inside of your
srcfolder. If you’re on a mac, you can
srcfile and then create an
index.htmlfile with the command
touch index.js index.html.
- In your
index.jsfile, add a
console.logto test if it is working later.
- Add the
index.htmlfile. I’ve also added an
<h1>tag with the word “Hi” in it. My
index.htmlfile looks like this:
Step 5: Setup HTML Webpack Plugin
- To install the HTML Webpack plugin, type
npm install html-webpack-plugin.
- To configure it, you can copy and paste the code below into your
Step 6: Run the Application
1 Head into your
package.json file and add a start script to your npm scripts. Inside of scripts replace the line that begins with
"test" and replace it with:
"start": “webpack-dev-server". It will look like this:
- In your terminal, run
npm start. Your app should start running. Check in your browser to make sure everything is working correctly.
Step 7: Install D3
npm install d3in your terminal.
- Add an svg like this to your
You should see this in your browser:
index.jsfile, add an import statement to include D3 in the file:
import * as d3 from 'd3';.
To test to be sure that D3 is loaded correctly, try using it by changing the color of the three rectangles you see on your screen. You can copy and paste the code below into your
If you’ve done it correctly, you should see the three little squares turn orange!
If you’ve followed all of these steps, you should find that you now have Webpack, Babel, and D3 correctly installed and functional. Please comment below if you have any questions or run into any issues.
Do you want design systems tips and tricks sent to your inbox?