kmiddleton14-blog

[kmiddleton14-blog]

How to build a basic end to end web application using React

In this blog post, I will be going over how to achieve a basic skeleton setup for a web application that uses React, Redux, Sequelize, and Express.  This post is intended for anyone who wants to quickly setup a web app for either a hackathon, personal project, or just to understand how all these tools fit together.

Directory structure

In our directory, we will have three main folders:

browser

public

server

Browser will consist of all the client side code where we will add our react components and containers, starting html file, and react-redux reducers and action-creators

Public will be all the static files we want to be made (you guessed it) public.  Here is where we will have our css files, images, favicon, and our bundle that webpack builds for us

Server is where we will be adding our express app and routes, and sequelize database structures

project | +-- browser | | | +-- react | | | | | +-- action-creators | | | | | +-- components | | | | | +-- containers | | | | | +-- reducers | | | | | +-- index.js | | | +-- index.html | +-- public | | | +-- bundle.js (public js file webpack automatically builds) | | | +-- css | +-- server | | | +-- app | | | | | +-- index.js (setting up express and routes) | | | | +-- db | | | | | +-- models | | | | | +-- db.js | | | +-- node_modules (created automatically from npm)

Install

Now that we have all our folders setup correctly in our project, it’s time to initiate our npm package in our terminal. This will create our package.json file that holds our project's dependencies. After initializing the package.json it should appear in your project's directory

>npm init

Time to download all our necessary libraries. On the browser side, we will need react and redux. For react we will need both react and react-dom libraries. React-dom is needed to replace react into the dom.  And we need the redux library with axios since axios allows us to make our ajax calls using redux

>npm install --save react react-dom redux axios

We also need babel and webpack in our dev dependencies. This bundles our react jsx files into the bundle.js public file.

>npm install --save-dev webpack babel-core babel-loader babel-preset-es2015 babel-preset-react

On our server side, we need to setup express and the database. I will use postgres for my database in this example.

>npm install --save express

When downloading the sequelize library, it requires the database you will be using library after.

>npm install —save sequelize pg pg-hstore

After all of these libraries are installed, all the dependencies should be populated in your package.json file

Setting up browser files

Let’s add our webpack.config.js file.  But first, what exactly is webpack doing and why do we need it again?  Webpack takes some javascript code, reads in that source, and then produces bundled javascript code in one file to run in the browser (bundle.js). 

So how does webpack know where to get the javascript files and know where to put the bundled output?  It looks in our webpack.config.js file for the entry and output file paths. Our entry file should be the main react root component.

'use strict'; var webpack = require('webpack'); module.exports = { entry: './browser/app.js', (entry point) output: { path: __dirname, filename: './public/bundle.js' (output path of bundle) }, context: __dirname, devtool: 'source-map', resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /jsx?$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react', 'es2015'] } } ] } };

In the module section, we tell it to use babel which transforms our react jsx files into code that can be run in the browser. To build our webpack, we need to use this command in the terminal. This step is necessary since webpack takes the code we've written, and makes it into an executable output

>webpack -w

After getting our webpack config file setup, we need to setup our index.html file, located in our browser folder

<!DOCTYPE html> <html> <head> <title>My Page</title> <script src="/bundle.js"></script> </head> <body> <div id='app'></div> </body> </html>

To me, this is one of the coolest thing about React! This is our entire html file that will be initially sent to the server. From there, the rest of our code will be added to the DOM inside that div tag that we called "app". Our next step will be adding our first react file and specifying which html tag to add it to

Within out react folder, add an index.js file.

import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>Welcome to your homepage!</h1>, document.getElementById('app') );

the document.getElementById here is very important since it specifies the name of the div to add all our jsx code to. This is a very basic h1 tag being added for demonstration, but we could add other components here as well or some javascript.

Time to add our server and express route

In our app folder, add an index.js with the following code

const express = require('express'); const app = express(); const path = require('path'); app.use(express.static(path.join(__dirname, '../public'))); app.get('/', (req, res) => { const filePath = path.resolve('browser/index.html') res.sendFile(filePath); }) const port = 8080; const server = app.listen(port, function(err) { if(err) throw err; console.log('server is listneing on port ', port) }) module.exports = app;

This is a very basic server and express route which only sends across our index.html file when landing on localhost:8080