Build a Simple Webpack/React App

We will build a simple webpack project that can be full customized to your choosing, but for this case it is for a react project.

Image for post
Image for post
Photo by Gabriel Beaudry on Unsplash

What is Webpack?

Webpack is a module bundler. Webpack can take care of bundling alongside a separate task runner. React, and Hot Module Replacement (HMR) helped to popularize webpack and led to its usage in other environments, such as Ruby on Rails. Despite its name, webpack is not limited to the web alone. It can bundle with other targets as well, as discussed in the Build Targets chapter.

We will retrieve data via the star wars api. We will have 7 components.

PeopleList — -List of PeopleItem

StarshipList — List of StarshipItem

PlanetList — List of PlanetItem

PeopleItem — Each individual person

StarshipItem — Each individual starship.

PlanetItem — Each individual planet.

Nav — The navigation bar, that will be responsible for routing.

We will first create a directory, then go to it, and then install your devDependencies.

webpack — a module bundler, can bundle any asset or resource.

webpack-cli — Provides a flexible set of commands run your bundler.

webpack-dev-server — Uses webpack with a development server for live reloading.

@babel/core — Enables all configurations for your babel compiler.

@babel/preset-env — Compiles es6 code into es5.

@babel/preset-react — Compiles jsx to javascript.

babel-loader — Responsible for loading our javascript file, which will compile code based on the presets in the .babelrc file.(Which we would create later in the tutorial.)

html-webpack-plugin — Creates a html file that serves your webpack bundle. Can let it generate a html file for you or can use lodash template. In this case we will generate a html file.

css-loader — Loads file with style-loader, compiles @import and url like import/require.

style-loader — Inject as style tag.

Then we will install our dependencies.

react — Enables the user of react library.

react-dom — Enables rendering our app component on our root id in our html file.

react-router-dom — Enables your routing for your app.

history — Enables history for your navigation of your route.

We will create a .babelrc, and webpack.config.js file within our root directory.

.babelrc — configures your babel compiler, in this case we will use a presets property to compile specific versions of javascript.

webpack.config.js — configures your webpack bundler.

Now we will create a src and dist directory, and within your src directory we will have a styles and components folder.

We will first configure our package.json, we will add a start and build script. When building your webpack bundle, you will have a start script with a — mode indicating if it is development, or production. Then in the case of development we would add the — watch flag to watch the package.json.

Our start script is for our development server, and our build script is our production server.

Configure your package.json for webpack.

In our webpack.config.js we will first import the modules we need. We will first import your path, which will join your app directory path with the src directory. Then we will import your html-webpack-plugin for initiating your bundle in a html file. Which would be set to the plugins property of the object you are exporting.

pathImport needed modules for your webpack.config.js or your webpack configuration file.

Define the object your will exporting from your configuration file. It will contain 4 properties.

entry — It would be where your ReactDOM will be initialized.

output — It would be where your distribution files would be in. It will contain a filename, and path property. The filename is the name of the file which all your files would be bundled in which would be index.bundle.js. Then path is where your bundled files would be in, which would be the dist folder.

module — It would contain a rules array which would contain object that each one will have at least a test property(the regex pattern to which files would be loaded), and loader(the loader or loaders that will load your files based on test property).

plugin — It would be where you initiate any plugins for you webpack configuration. In which we would use html-template-plugin to create a file which would reference index.bundle.js.

Define your configuration object.

Now define your .babelrc which will hold your configuration for your babel compiler. We would only define our presets property with our preset-env and preset-react module.

Define your babel compiler options.

Now we will go to our index.html file in our src folder.

Markup for your html file.

Define your index.js which would be where entry point of the virtual dom would be configured. We will retrieve the App component from the ./components/App which has not be defined yet. Then import React, and the render method from react-dom that will render your App component in your virtual dom, which will be set to element with a id of root.

Configure your virtual dom.

Now lets create your App component which would be set to your app. Create a App.js file in your components folder. And a App.css file in your styles folder.

You app component will have just a div, and another div which will hold your content. We will use PureComponent instead of Component to perform a shallow comparison of props and state.

Define your app component.

Now define the styles for your App component.

Define your styles for your app.js

Now run npm start, it should bundle your file. Your dist directory should look like this.

Image for post
Image for post

But we would like our app to hot reload, so in our package.json. Let’s just replace the start script with a webpack-dev-server — mode development, then to have it open via -open flag, so your app opens when your dev server starts and a -hot flag to indicate it is hot reloading.

Add a different start script indicating your dev server opens, and hot reloads.

We will first define our list component, and styles. We will create a PeopleList.js, StarshipList.js, and PlanetList.js file. Instead of making styles for each component, we will just create a List.css for all of our list styles. (NOTE: Our routes would be set to each of these components.

In each of our List components, we will have a div and inner div, and have your elements loop through it. We would have a data array in our state. In our componentDidMount we would fetch data, with a options object specifying our ajax call is a get method.

So for our PeopleList component we will retrieve data using the componentDidMount method, and using es6 fetch api. In our fetch api we will pass a option with a method property set to GET indicating it is a get request. We will conditionally render the data array from state that will be set to the data of the response.

Define your people list component.

Now follow the same pattern for your PlanetList and Starship component, with their respective endpoint.

Here is swapi if you want to play with the api.

Define a starships list component.
Define a planet list component.

Now we will import each component to the App.js to see if the ajax requests are successful.

Here is the PeopleList

Image for post
Image for post

Here is the StarshipList

Image for post
Image for post

Here is the PlanetList

Image for post
Image for post

Great we will configure our Routes.

Now let’s define our routes, we will create a Routes.js file which will hold our routes in the root of our src directory.

In our Routes.js file, we will import the Switch and Route component. The Switch component will go to the first component that matches the intended route. Our routes will be / which would be using the exact keyword. Then would /people, /planet, and /starship for intended list components.

We will create a Home component for our home route (/).

Here are Routes.js file.

Now we will go configure our Router in our index.js file in within our src folder. We will be using BrowserRouter and alias as R when we import it, and nest our App component.

Encapsulate the App Component with Browser Router.

Now define our Navbar component to navigate to each page, it will be in our presentational folder, and the function used to navigate to the route will be passed down from the App component.

Update styles for navbar and title for each route in the app.css.

Finally import the withRouter from react-router-dom, Routes, and Navbar component to the App.js file, and bind the navigate function in the constructor of the class.

Now the navigation bar should route each page.

The home page.

Image for post
Image for post

The people list page.

Image for post
Image for post

The planets list page.

Image for post
Image for post

The star ship list page.

Image for post
Image for post

This is a very basic setup of a webpack project. Use this as a starting point, add a route for each person, planet and star ship.

Here is the github repository as a reference:

Happy Coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store