Looking to optimize the performance of your Spring Boot Application? (Who isn’t?) Sure, you could pull JavaScript and CSS files from a CDN, but for a real performance upgrade you probably want to try bundling your assets with webpack! In a previous tutorial you created a web application using React and Bootstrap that pulled libraries into HTML manually. In this post, you’ll learn how to use webpack to organize your imports more effectively.

Start a New React Application with Spring Boot

Start by cloning the previous application and making sure you have Stormpath configured with a ~/.stormpath/apiKey.properties file. It should then boot with Maven.

Open your browser and navigate to http://localhost:8080. This presents you with a login screen, and once you’re logged in a styled data table.

React + Spring Boot

Convert HTML

Now, strip out the external JavaScript and CSS imports in src/main/resources/templates/index.html. Also remove the Babel specifier in your local script and change app.js to bundle.js.

Move your app.js from src/main/webapp/public to src.

Webpack Configuration

Configure webpack by creating a file called webpack.config.js in the root directory. It defines a Node-style export module.

entry is the starting point of your app or component. It is the main method of your code and is where webpack builds a dependency graph from.

output is where the bundled assets should end up. You put it into src/main/webapp/public because that is where Spring Boot serves out static files to the public.

Run Webpack from the Command Line

With the configuration file complete, all you need to do is run webpack from the command line.

Note: if you haven’t done so already install webpack globally with npm install -g webpack.

Webpack from the Command Line

You’ll see an error that mentions ‘Unexpected token’. This is because your script is written in ES6 and you need to convert it to common Javascript. You do this with loaders in your webpack.config.js.

Use Loaders

Loaders process assets before being bundled. You include them in your webpack.config.js.

You’ve specified that any file ending in .js should be processed with the Babel loader, except for those in the node_modules directory, using the es2015 and React Babel presets.

You also need to install these modules using npm. However, you’ll need a package.json file first. To create one, run npm init. The values I used below are defaults or examples.

After creating package.json, you should be able to install the necessary dependencies.

You might see some warnings about peer dependencies not being met. If you do, run the following command:

Now when you run webpack from the command line, you should see a success message!

Use Loaders (React + Webpack)

Add Dependencies

If you refresh the page, you’ll see only the login button appears, unstyled. Loading the console shows that React was not found in bundle.js.

React dependencies

You need to import the libraries to app.js.

Also, pull the libraries in locally using npm.

After running webpack again and refreshing your browser, you should see your component but without styling.

Unstyled component

Style Your CSS

To get styling to work you once again need to install the required libraries using npm.

Now import the style files directly into your app.js.

Finally, add loaders for both the CSS files and for any assets the CSS might reference.

style!css means first use style-loader and then pass it to css-loader. Install the loaders via npm.

Now when you run webpack, you should see successful output and the various assets that were converted.

Assets converted (React + Webpack)

Refresh your page, and you should see the same, fully styled component as before.

You’ve just converted your React/Bootstrap app over to webpack!

Command Line Options for Webpack

There are many things you can do with webpack. For example, to minify your bundles for production just add -p when you build.

You can also use -w to watch for changes and build automatically.

Splitting Out CSS

You might also want to split your CSS out into a separate bundle. This can be achieved with the ExtractTextPlugin. First, install the plugin via npm.

Now change your CSS loader to use the plugin. Start by importing the plugin at the top of your webpack.config.js.

Then replace the CSS loader.

Finally, add a plugins section below module.

Now you can update your HTML to pull in the new bundle.

Integrate with Gulp

If you need to automate external tasks you can integrate your webpack setup with Gulp. Start by installing Gulp and the webpack stream utility.

Then create the following gulpfile.js.

Now running gulp from the command line will run your webpack configuration as before.

Gulp and your webpack configuration

Components Everywhere!

The prevailing ethos on designing the web is component-based. Applications are split into reusable pieces. React is a leader in this regard.

Writing traditional HTML to support components doesn’t make sense. Manually pulling in assets, libraries such as jQuery or stylings like Bootstrap, quickly becomes a mess. Webpack solves this for you!

I hope this tutorial has shown you how easy it is to configure webpack in your React application. To view the finished code, check out the GitHub repo.

Or, if you’re interested in learning more about React or Spring Boot, check out one of these great resources: