Usually, these types of articles give you a list of commands to run and some pre-made configuration files that aren’t always fit for use. They also go out of date very quickly. In this article, I wanted to provide a better resource, one that will help you to understand exactly what is happening, so that you can make your own informed decisions, not just now, but also in the future.
- A package manager, this gives you access to a huge number of third-party packages that you will need to build your app. It also manages dependencies for you and provides an easy way to update and install packages. The two most popular package managers are
- A bundler will allow you to write modular code and bundle it together in small packages. This provides you with the ability to optimise your site and improve page load times in addition, for larger apps this can be a very useful tool, not to mention the SEO benefits that can be gained by faster page load times. I usually use
rollupare both valid options here as well.
- A compiler, this lets you write modern JS code that will work across older browsers. The benefit here is that you can use modern JS features that will still work everywhere. I usually use
There are more than just these three in a production-ready environment, but we’re just focusing on what you need to start writing code in this article.
Now that we know which components we need to setup our development environment, we can jump right in.
Choosing and installing a package manager
In my personal experience, the average developer won’t notice much of a difference between
npm. They both do the same thing, provide the same access to the same repositories and generally operate in the same way. That being said, there is a very good reason that
yarn was developed in the first place. You can read about that here. I usually use
yarn in my projects simply because it is what I have always used and it is what I am comfortable using, it is generally faster too. It is important to remember that migrating between
yarn is easily done also (depending on how large your project is), so changing your mind isn’t going to cause too many headaches in most scenarios.
If you’re still unsure on which one to use, try setting up a project with
npm and then with
yarn. You’ll notice that there isn’t much difference, except in the
.lock files that are generated, and maybe a very small difference in speed, but this may inform your decision further.
To install your package manager on your machine, you’ll need to follow the relevant guidance in the documentation:
Instructions for Yarn can be found here. (You need to install NPM to install Yarn).
Once you have your package manager of choice installed and working, you are ready to move on to the next section.
Setting up a bundler
My bundler of choice is
webpack. In this section, I’ll walk through setting up webpack for local development purposes. First up, create a new directory for your web app and navigate to it in your terminal. Then initialise yarn in the directory and install webpack as a development dependency:
yarn init -y
yarn add webpack webpack-cli -D
You should now have a
pacakge.json file that looks something like this:
Along with a
yarn.lock file and a
node_modules directory in your project directory.
Now go ahead and create an
index.htmlfile at the root of your project, and create a new directory called
src with a new file inside it called
Your file structure should now look something like this:
And then add the following code to your
Next, adjust your
package.json to avoid accidentally publishing it, it should look like this:
You should now be able to open your
index.html file in a web browser and see a JS alert saying
hello, webpack world!
We still aren’t using webpack yet, though. Let’s make some changes so we can begin to use it.
First, create a directory called
dist and move
index.html into it. Your directory should look like this:
Next, alter your
index.html file so it points to a script called
main.js instead of
./src/index.js . This file will be generated by webpack for you when you run it. It should now look like this:
Now go ahead and run
yarn webpack in your terminal. The output should look like this:
We can see a warning in the output here, this is because webpack expects a mode to be set. Don’t worry about this just yet, we’ll configure this warning out later.
For now, just take a look at your
dist directory. It should now have a file called
main.js in it. If you go ahead and open up
dist/index.html in your web browser you should see the alert once again.
Now that we’ve got webpack working, let’s start to play with some configuration options that will get rid of those warnings and help to speed up our development process a little bit.
First up, create a new file called
webpack.config.js in the root of your project:
Your file structure should look like this:
Now try running
yarn webpack in your terminal again. The output should now be warning free:
Now that we’ve eliminated our warnings, let’s go ahead and setup hot module replacement to help us iterate more quickly. Hot module replacement exchanges, adds, or removes modules while an application is running, without a full reload.
Go ahead and install
webpack-dev-server with the following command:
yarn add -D webpack-dev-server
This allows us to serve our app locally and use HMR.
Next, update your
webpack.config.js file to include our
Finally, let’s add a script to our
package.json so we can easily run this from the command line.
yarn webpack:development in your console. This should build your app, serve it, and automatically open it in a tab in your browser. If you don’t like the auto-open functionality you can remove the
open property from your
devServer configuration in
webpack.config.js . You can then manually go to
localhost:8080 to access your running app.
See more on webpack configuration here if you’re looking for additional behaviour.
The last step is to set up our compiler. This step is important because without it, webpack cannot parse any JSX. We’ll use babel for this, let’s get it installed:
yarn add -D babel-loader @babel/core @babel/preset-env @babel/preset-react
Once we’ve installed these, we can update our
webpack.config.js to start using them.
Finally, we can install
react-dom and begin using it in our app.
yarn add react react-dom
Now update your
src/index.js file to render a simple React component:
Finally, we’ll need to add an element to mount our component onto in
Now go ahead and run
yarn webpack:development again, it should open your fresh React app up in your browser:
Now that you’ve got a React app up and running, you should be able to go ahead and start developing as you please. If you’re looking to add assets like fonts and images to your app, check out webpack plugins. You can also specify a webpack config file for production separately to the one we have created in this tutorial for the development build and then use scripts in
package.json to run the preferred config with the webpack
Hopefully this document has given you a good understanding of how the toolchain fits together and allowed you to set up your own app from scratch. For extra credit, try swapping out one of the components in the toolchain for an alternative solution and let me know how it goes!