React + Webpack inside VSTS

Continuous everything

Today almost all web projects that you work on are using node.js, npm and git at least somewhere in the build process. And it is a moment where a tool like webpack with npm scripts is gaining advantage over gulp or grunt. Still on VSTS you will not find a template to build web apps using webpack. So here is a helping hand in this direction and we will see that building with webpack in VSTS is pretty simple.

We will also solve a common issue with the history module when using react-router: Unable to resolve path to module ‘react-router/node_modules/history/lib/createBrowserHistory’ import/no-unresolved.

Setting up the build on VSTS

We will assume that you already have a React app and you are pushing it to VSTS via GIT. You build it with webpack and it works successfully on your computer. And now it is time to create a build definition inside VSTS, that will also help you deploy your app on an Azure App Service.

Step 1

We will use the Gulp template because it has a few steps already configured, so we are gaining some clicks.

Step 2

After which we will remove the gulp step and add the npm run build step. We can do this from Add New Task > Package Tab > and pick the npm simple one. The new step should be configured like the below, just run a custom command ‘run build’:

Step 3

When we run ‘npm run build’ webpack will create a folder called ‘dist’ and that’s where our production files are.

The last step will be to modify the Archive files step, in order to archive the folder dist, like in this picture.

Fixing the react-router error

Now we are ready to queue our first build. Which in most cases should be a successful one.

But in my application because I was using react-router package I got the following error: Unable to resolve path to module ‘react-router/node_modules/history/lib/createBrowserHistory’ import/no-unresolved.

After investigating the error I found out this history packages has indeed some special requests, react-router has a dependency on history version 3.x to work with, it fails when you have newer versions installed. The error itself wasn’t saying this, it actually gave an indication that the history package which should have been installed as a module for react-router was missing. There was no node_modules inside the folder of the package react-router. On our local build this was created without any issues, but on the VSTS build for some reasons it failed to install.

Step 4 (optional)

The only thing that fixed the build was to add an extra step after the npm install, to call npm install separately for the react-router package. So this will look like below

That’s it, enjoy your CI build done with VSTS.