Building a Weather App with Node, Express, Webpack & React Part 1: Setup

Welcome back! If you missed the intro to this series, feel free to head back for an overview of what we're building. The code for all published parts of this tutorial is also available on Github.

In part 1 we're going to set up a basic Express.js server, which serves out a barebones React.js application. Together, these will form the backend and front end frameworks for our eventual weather app.

Express.js Setup

We're going to use a nice little tool called express-generator to get our server up and running. It's a little command line app by the Express.js team that'll scaffold out the basics you need to run a server.

To  install express generator, run the following on the command line:

$ npm install express-generator -g

The tool has a few options available when it comes to scaffolding our your app that you can explore by running express -h, but for the purposes of our weather app we're going to stick to a fairly basic setup.

The following command will scaffold out an Express app with ejs view engine support and a basic .gitignore in a directory called react-weather-tutorial:

express -v ejs --git react-weather-tutorial

The generator will then go ahead and create (and list) the files it's created:

   create : react-weather-tutorial/
   create : react-weather-tutorial/public/
   create : react-weather-tutorial/public/javascripts/
   create : react-weather-tutorial/public/images/
   create : react-weather-tutorial/public/stylesheets/
   create : react-weather-tutorial/public/stylesheets/style.css
   create : react-weather-tutorial/routes/
   create : react-weather-tutorial/routes/index.js
   create : react-weather-tutorial/routes/users.js
   create : react-weather-tutorial/views/
   create : react-weather-tutorial/views/error.ejs
   create : react-weather-tutorial/views/index.ejs
   create : react-weather-tutorial/.gitignore
   create : react-weather-tutorial/app.js
   create : react-weather-tutorial/package.json
   create : react-weather-tutorial/bin/
   create : react-weather-tutorial/bin/www

   change directory:
     $ cd react-weather-tutorial

   install dependencies:
     $ npm install

   run the app:
     $ DEBUG=react-weather-tutorial:* npm start

To get up and running, change into the react-weather-tutorial directory and run npm install to pull down the packages Express needs to run.

Once everything's installed, kick off the server with the command npm run start. If you browse to localhost:3000 (the default Express port), you should see the exciting Express landing page:

Express.js Landing Page

And that's all you need to do to become the proud owner of an Express-powered website.

Webpack Setup

Since we already have somewhere to serve React out from (and I want to clear some of the mystery around the setup part of the process), we're going to set React up from scratch using Webpack to bundle everything together.

Sidenote: If you're playing with React and want a quick route to 'hello world' in future and don't need a server or API's, you might want to check out create-react-app.

To install everything we need in one go, run the following:

$ npm install --save-dev react react-dom react-transition-group webpack webpack-cli mini-css-extract-plugin css-loader postcss-loader node-sass sass-loader autoprefixer babel-core babel-loader babel-preset-react 

Once NPM has finished, create a file called 'webpack.config.js' in the app's root directory with the following config:

We also need a babel config file in the same directory called .babelrc (note the full stop at the start):

That should be it for the build tools, but we don't have anything to compile yet! Let's fix that in the next section.

React and SASS Setup

For the moment, let's create a 'hello world' React app in '/assets/js/index.jsx' so we can test Webpack is working correctly:

We'll also create a corresponding SASS file in '/assets/scsss/app.scss' as an example of how Webpack can deal with stylesheet preproccing:

Lastly, let's add a new entry in the scripts section of package.json so we can easily run our new Webpack task:

"scripts": {
    "start": "node ./bin/www",
    "webpack": "webpack --env=dev"

Ok, let's give it a spin. Run the following command:

$ npm run webpack

If all has gone well, you should see something resembling the following output from Webpack:

> react-weather-tutorial@0.0.0 webpack /Users/paulaikman/Dev/Projects/personal/react-weather-tutorial
> webpack --env=dev

[BABEL] Note: The code generator has deoptimised the styling of "/Users/paulaikman/Dev/Projects/personal/react-weather-tutorial/node_modules/react-dom/cjs/react-dom.development.js" as it exceeds the max of "500KB".
Hash: b98a4d0fd152e84dc23c
Version: webpack 4.16.5
Time: 2549ms
Built at: 12/08/2018 14:40:58
               Asset       Size  Chunks             Chunk Names
           js/app.js    606 KiB     app  [emitted]  app
    ./css/styles.css   60 bytes  styles  [emitted]  styles
        js/styles.js   3.85 KiB  styles  [emitted]  styles
       js/   1.13 MiB     app  [emitted]  app
./css/  193 bytes  styles  [emitted]  styles
    js/   3.64 KiB  styles  [emitted]  styles
Entrypoint app = js/app.js js/
Entrypoint styles = ./css/styles.css js/styles.js ./css/ js/
[./assets/js/index.jsx] 173 bytes {app} [built]
[./assets/scss/app.scss] 39 bytes {styles} [built]
    + 22 hidden modules
Child mini-css-extract-plugin node_modules/css-loader/index.js??ref--5-1!node_modules/postcss-loader/src/index.js??ref--5-2!node_modules/sass-loader/lib/loader.js??ref--5-3!assets/scss/app.scss:
    Entrypoint mini-css-extract-plugin = *
    [./node_modules/css-loader/index.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/lib/loader.js?!./assets/scss/app.scss] ./node_modules/css-loader??ref--5-1!./node_modules/postcss-loader/src??ref--5-2!./node_modules/sass-loader/lib/loader.js??ref--5-3!./assets/scss/app.scss 421 bytes {mini-css-extract-plugin} [built]
        + 1 hidden module

Putting it all together

So far, so good - but we haven't actually served out any React yet!

The good news is we're almost at the finish line, we just need to load our React app as a script on our index page and give it a target to render into in the DOM.

Replace '/views/index.ejs' contents with the following:

Once you've saved the file, start the server with npm run start and you should be greeted with something like the following:

React "Hello World"

Phew! If all has gone well, we now have our very own Express.js web server running a (very simple) React app.

We've now completed all of the setup tasks we need to build a pretty solid React weather app. If one of the steps did't work for you, check out my repo with the tutorial code on Github.

Check back soon or keep an eye on my twitter for part 2, where we'll get set up with all of the API's we'll need to supply the the data our React app will need.

As always, let me know what you think @paulaik or in the comments below!

Show Comments