Forem: Anshuman Chhapolia

Adding style to Server-Side rendering and automating the build process

Anshuman Chhapolia — Fri, 15 May 2020 16:20:59 +0000

In the previous post in series, I demonstrated how we can easily set up a project for Server-Side Rendering from scratch. I appreciate @silverspear28 and @coderbhaai for building their application using the previously proposed structure. Their feedback was very helpful in improving this project.

Prerequisites

Node.js
npm
Your preferred editor

Note: You must have basic knowledge of React and Express before moving forward. Best place to learn React is React Documentation. Express is the de facto standard framework for Node.js and you can find many resources online to learn it.

Things I'll cover in this post

Creating a project for SSR from scratch (including writing babel and webpack configs).
Adding styles and images to our page

I'll be explaining webpack and babel in detail so people who are not familiar with these can also understand the config files.

Setting up the project directory.

I've already covered this in the previous post. Please refer it for the details and explanation of the steps performed.


|-- project
     |-- .babelrc.js
     |-- package-lock.json
     |-- package.json
     |-- webpack.config.js
     |-- src
          |-- server.js
          |-- components
          |   |-- entrypoints
          |   |     |-- index.jsx
          |-- pages
          |   |-- index.jsx
          |   |-- index.css
          |   |-- img.jpg
          |-- routes
          |   |-- index.js
          |-- views
               |-- pages
               |    |-- template.ejs
               |-- partials

Major Changes made to file structure:

pages directory moved out of components directory.
Replaces .babelrc with a .babelrc.js to create dynamic configuration for babel.

package.json

{
  "scripts": {
    "webpack": "webpack -d",
    "dev": "nodemon --exec 'npm run webpack &&  COMPILER_ENV=server babel-node src/server.js'",
    "webpack-production": "NODE_ENV=production webpack -p",
    "babel-production": "NODE_ENV=production COMPILER_ENV=server babel --out-dir dist src",
    "start": "node dist/server.js",
    "build": "npm run webpack-production && npm run babel-production"
  },
  "author": "smoketrees",
  "license": "MIT",
  "nodemonConfig": {
    "ignore": [
      "src/static/**/*"
    ]
  },
  "homepage": "https://github.com/smoke-trees/forum#readme",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.8.4",
    "@babel/node": "^7.8.4",
    "@babel/plugin-proposal-class-properties": "^7.8.3",
    "@babel/polyfill": "^7.8.3",
    "@babel/preset-env": "^7.8.4",
    "@babel/preset-react": "^7.8.3",
    "babel-loader": "^8.0.6",
    "babel-plugin-file-loader": "^2.0.0",
    "babel-plugin-transform-require-ignore": "^0.1.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "nodemon": "^2.0.2",
    "raw-loader": "^4.0.1",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "compression": "^1.7.4",
    "ejs": "^3.0.1",
    "express": "^4.17.1",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
}

src/server.js

import express from "express";
import compression from "compression";
import index from "./routes/index";
import path from "path";

// Server var
const app = express();

// View engine setup
app.set("views", path.join(__dirname, 'static', "views"));
app.set("view engine", "ejs");

// Middleware
app.use(compression());
app.use('/public', express.static(path.join(__dirname, 'static', 'public')));

//Routes
app.use("/", index);

const port = process.env.PORT || 3000;

app.listen(port, function listenHandler() {
    console.info(`Running on ${port}`)
});

A basic express server serving at port 3000.

.babelrc.js

A .babelrc.js file is not much different than a .babelrc.js and default exports an object which will represent the .babelrc file.

const presets =
  [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    [
      "@babel/preset-react"
    ]
  ]

const plugins = [
  "@babel/plugin-proposal-class-properties",

]

if (process.env.COMPILER_ENV === 'server') {
  plugins.push(
    [
      "file-loader",
      {
        "name": "[hash].[ext]",
        "extensions": ["png", "jpg", "jpeg", "gif", "svg"],
        "publicPath": "/public/img",
        "outputPath": null
      },
      "img-file-loader-plugin"
    ],
    [
      "file-loader",
      {
        "name": "[hash].[ext]",
        "extensions": ["css", "sass", "scss"],
        "publicPath": "/public/css",
        "outputPath": null
      },
      "css-file-loader-plugin"
    ],
  )
}

const addConfigs = { ignore: ["./src/static/"] }

module.exports = { plugins, presets, ...addConfigs }

I've added an extra babel plugin to this file called babel-plugin-file-loader. I would recommend going through its README. It is configured here to convert
import styles from 'styles.css'
to
const style='/publicPath/[filehash].css'

It's important to import CSS in an above-mentioned way as simply importing it as import 'styles.css' will throw an error.

Two instances of the plugins have been configured for this plugin one for the images and another for the css files. Output path for these files is set to null as copying these files to final build will be handled by webpack. Option publicPath is to configure the path where the files will be available through the server.

This babel file is used to transpile the code two times one time when it's bundled by webpack and once when we finally transpile our src folder to run using node. When webpack is using the config file we don't want it to use the babel-plugin-file-loader so we've used an environment variable to control when the plugin is used.

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const production = process.env.NODE_ENV === 'production'

const pages = ['index']

const generateEntryPoints = (entry) => {
    return entry.reduce((obj, item) => {
        return {
            ...obj,
            [item]: [path.resolve('src', 'components', 'entrypoints', `${item}.jsx`)]
        }
    }, {})
}

const generateHtml = (entry) => {
    return entry.map((i) => {
        return new HtmlWebpackPlugin({
            chunks: [i],
            filename: `../views/pages/${i}.ejs`,
            template: path.join('src', 'views', 'pages', 'template.ejs')
        })

    })
}

const config = [{
    entry: {
        ...generateEntryPoints(pages)
    },

    output: {
        path: production ? path.resolve(__dirname, 'dist', 'static', 'public') : path.resolve(__dirname, 'src', 'static', 'public'),
        filename: production ? 'js/[chunkhash].js' : 'js/[name].js',
        publicPath: '/public'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                    }
                },
                exclude: [/node_modules/, /static/]
            }, {
                test: /\.ejs$/,
                loader: 'raw-loader'
            }, {
                test: /\.(css)$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '/public/css'
                    }

                }, 'css-loader']
            }, {
                test: /\.(jpg|jpeg|png|svg|gif)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[md5:hash:hex].[ext]',
                        publicPath: '/public/img',
                        outputPath: 'img',
                    }
                }]
            }
        ]
    },

    resolve: {
        extensions: ['.js', '.jsx', '.json', '.wasm', '.mjs', '*']
    },

    optimization: {
        splitChunks: {
            automaticNameDelimiter: '.',
            cacheGroups: {
                react: {
                    chunks: 'initial',
                }
            }
        }
    },

    plugins: [
        new CleanWebpackPlugin(),
        // create blog,
        new MiniCssExtractPlugin({
            filename: production ? 'css/[contentHash].css' : 'css/[id].css',
            chunkFilename: production ? 'css/[contentHash].css' : 'css/[id].css'
        }),
        // Ejs pages
        ...generateHtml(pages)
    ]
}]

module.exports = config

A lot of plugins have been added to the webpack file and I've written 2 functions to automate the task of creating ejs file.

clean-webpack-plugin: This plugin cleans the public folder on each run where the output for the webpack is saved.
html-webpack-plugin: HtmlWebpackPlugin plugin is used to create HTML for each page from a template file. The files that are needed to add for the scripts and css will be added automatically for each page depending on its need. I've used raw-loader to load the ejs file as using the default loader of the plugin will cause issues with ejs.
mini-css-extract-plugin: MiniCssExtractPlugin is used to extract css from different files and bundle them into different chunks. These chunks will be added automatically thanks to HtmlWebpackPlugin.
file-loader: file-loader is used to copy image files into the public folder.
babel-loader: babel-loader is used to transpile the React jsx files before bundling.
css-loader: css-loader is used to load css files and resolve imports in the jsx files.

I'll cover the two functions generateHtml and generateEntryPoints later on ["Adding more pages"].

src/views/pages/template.ejs

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Smoke -h</title>
</head>

<body>
    <div id="root"><%- reactApp %></div>
</body>

</html>

As I mentioned earlier we need not link css files or js scripts ourselves as it will be handled by HtmlWebpackPlugin.

src/pages/index.jsx

import React from "react";

import global from './global.css'
import index from './index.css'

import img from './img.jpg'

class Index extends React.Component {
    constructor() {
        super();
        this.state = { name: "a", email: "" }
    }


    onFormSubmit = (event) => {
        event.preventDefault();
    }

    onNameChangeHandler = (event) => {
        this.setState({ name: event.target.value });
    }

    onEmailChangeHandler = (event) => {
        this.setState({ email: event.target.value });
    }

    render() {
        return (
            <div>
                <h1 className='heading'>Smoke -h</h1>
                <form onSubmit={this.onFormSubmit}>
                    <div>
                        <label htmlFor={"name-input"} defaultValue={"Name"}>Name: </label>
                        <input name={"name-input"} onChange={this.onNameChangeHandler} type={"text"}
                            value={this.state.name} />
                    </div>
                    <br />
                    <div>
                        <label htmlFor={"email-input"} defaultValue={"Email"}>Email: </label>
                        <input name={"email-input"} onChange={this.onEmailChangeHandler} type={"email"}
                            placeholder={"email"} value={this.state.email} />
                    </div>
                    <br />
                    <div>
                        <button type={"submit"}>Submit</button>
                    </div>
                </form>
                <span><h5>Name: {this.state.name}</h5></span>
                <span><h5>Email: {this.state.email}</h5></span>
                <img src={img} alt='something' />>
            </div >
        )
    }
}

export default Index;

src/components/entrypoint

import React from "react";

import { hydrate } from "react-dom";

import Index from '../../pages/index'


hydrate(<Index />, document.getElementById("root"));

src/routes/index.js

import express from "express";
import React from "react";
import { renderToString } from "react-dom/server"
import Index from "../pages/index"


const router = express.Router();

router.get('/', async (req, res) => {
    const reactComp = renderToString(<Index />);
    res.status(200).render('pages/index', { reactApp: reactComp });
})
export default router;

I've also made an update to previous scripts and now you need to run npm run dev to start the development server. It will put the watch on files using nodemon and re-bundle the files and restart the files automatically on change.

Performing the above steps will give the same result as the previous part 😝 Until now I've mentioned the changes made as compared to the previous post. Now let's move forward with adding another page to the project and adding a stylesheet and an image.

Adding a new page to the project.

Adding a new page to our project consist of a few steps.

1) Adding a JSX file for the page in the src/pages directory

import React, { Component } from 'react'
import aboutStyle from "./about.css" // please don't import as: import './about.css' as it will cause an error due to babel-plugin-file-loader
import img from "./img.jpg"

export class About extends Component {
    render() {
        return (
            <div className='heading'>
                This is the about page
                <div className='subheading'>
                    This is the sub heading
                    <img src={img}/>
                </div>
            </div>
        )
    }
}

export default About

An image and a css file imported here to demonstrate how we can do that.

2) Add a route handler to express to serve at the new route.
For now, we can do this in the /routes/index.js

import express from "express";
import React from "react";
import { renderToString } from "react-dom/server"
import Index from "../pages/index"
import About from "../pages/about"


const router = express.Router();

router.get('/', async (req, res) => {
    const reactComp = renderToString(<Index />);
    res.status(200).render('pages/index', { reactApp: reactComp });
})
router.get('/about', async (req, res) => {   // Add route /about
    const reactComp = renderToString(<About />);
    res.status(200).render('pages/about', { reactApp: reactComp });
});

export default router;

3) Create an entry point file inside src/components/entrypoint for the new page.

src/components/entrypoint

import React from "react";

import { hydrate } from "react-dom";

import Index from '../../pages/about'

hydrate(<Index />, document.getElementById("root"));

4) Add an element to the pages array in the webpack.config.js file.


...
...

const pages = ['index', 'about']

...
...

Note: The name of the element added to the pages array is the same name as the entrypoint file.

You should add an image as img.jpg and a css file about.css with some styling in the src/pages directory.

How to run

Simply run following command on the terminal

npm run dev

It will put a watch on files and re-bundle the files and restart the server on changes.

How to build for production

npm run build

The above command will create production bundles and compile JSX code to commonjs which can be used run using node.js

Starting production server

npm start

Ending notes

I've created a companion repository for this post. You can use the repository as the base of your project.

I've added a Dockerfile to create an optimized docker image of your application using the production build.

For consuming API you can use ComponentDidMount() lifecycle method in a class component or useEffect hook in a functional component on the Client side. To consume an API on the server-side please wait for my next post.

Node.js Application Template

Anshuman Chhapolia — Thu, 09 Apr 2020 20:27:17 +0000

This post discuss about the template we use at SmokeTrees.

To start the server run

$ npm start

Note: This will run a server for development environment.
For information on deploying express application to production server and learn best practices refer this.

logger

This directory has 2 files.

logger.js exports a winston object which we use for logging. You should edit logger.js to write your config for the logs.
morgan.js exports a pre-configured morgan object to log using stream to winston object. It is used to intercept the HTTP request and log the request and response details. For more details visit the official page for morgan.

routes

Directory for defining routes. I don't think this need more explanation.

Additional Information

If on Linux running the following command add ./node_modules/.bin to the path.

  $ source ./activate

By doing so we can use the commands installed with packages using the terminal.
This won't be required in many IDEs like Webstorm but I thought it will be a good idea to include it.

standard.js has been added as the default linting and styling tool

Use :

  $ npm run lint

Fixes whatever can be fixed. Above command logs out the errors which it couldn't fix.

mocha is used for testing and chai is used for assertion. chai-http is used to test http endpoints.

Use:

    $ npm test

nyc is used as the default coverage tool. Use:

   $ npm run coverage

The master contains code for an HTTP server. Checkout the branch https for the HTTP server. Replace the self-signed certificates in the certs with your SSL certificates.

Dependency information

Dependency	Usage
compression	Compresses the response
express	Express
morgan	HTTP request logger
winston	General purpose logger for the application
nyc	Code Coverage tool
standard	Linting and styling tool.
chai	Assertion Library
chai-http	Middleware for chai to test http endpoints

Implementing Server Side Rendering using React and Express

Anshuman Chhapolia — Sun, 16 Feb 2020 06:00:55 +0000

Server Side Rendering let us render a basic skeleton of our page server-side and send it to the user. This provides us with benefits like Search engine optimisation and faster initial page load. Let's start from scratch. You can clone this whole project from here.

Prerequisites

Nodejs
npm
Your prefered editor

Basic layout of the project directory


```



|-- project
     |-- .babelrc
     |-- package-lock.json
     |-- package.json
     |-- webpack.config.js
     |-- src
          |-- server.js
          |-- components
          |   |-- entrypoints
          |   |     |-- index.jsx
          |   |-- pages
          |         |-- index.jsx
          |-- routes
          |     |-- index.js
          |-- views
               |-- pages
               |    |-- index.ejs
               |-- partials



```

Setting up babel and Express.js

Following command initializes a node package in the current directory.



$ npm init

Next, we install Express and ejs. We will be using ejs as express view engine to write base HTML for the page.



$ npm install express ejs compression react react-dom

Following commands install various packages required for babel.



$ npm install --save-dev @babel/core @babel-cli @babel/node @babel/plugin-proposal-class-properties @babel/preset-env @babel/polyfill @babel/preset-react nodemon webpack webpack-cli

Details about above packages

@babel/core: Babel's core runtime
@babel/node: Babel node is a cli that works the same as the Node.js CLI, with the added benefit of compiling with Babel presets and plugins before running it
@babel/plugin-proposal-class-properties: plugin required by Babel to support classes
@babel/preset-env : Babel preset that allows using latest JavaScript.
@babel/preset-react: Babel preset required for react.
@babel/polyfill: Needed by react to when using promises
@babel/cli: Optional. Can be used later to compile to the target the application (server and react files) for node to deploy in production.

Configure the babel

Create a file .babelrc in the project directory. If you have any doubt where a file is to be placed refer to the directory structure. Keeping a good structure file is a very important part of code maintenance and is required in huge projects.

.babelrc



{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "current"
        }
      }
    ],
    [
      "@babel/preset-react"
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-proposal-class-properties"
    ]
  ]
}

Setup Server

Create src directory under the project. Add server.js file to it.

./src/server.js



import express from "express";
import compression from "compression";
import index from "./routes/index";
import path from "path";

// Server var
const app = express();

// View engine setup
app.set("views", path.join(__dirname,"views"));
app.set("view engine", "ejs");

// Middleware
app.use(compression());
console.log(__dirname);
app.use(express.static(__dirname + "/public"));

//Routes
app.use("/", index);

const port = process.env.PORT || 3000;

app.listen(port, function listenHandler() {
    console.info(`Running on ${port}`)
});

Create a routes directory user src. Add index.js file to routes directory. Add files which implement different routes to this directory.

./src/routes/index.js



import express from "express";

const router = express.Router();

router.get('/', async (req, res) => {
    let reactComp = ""; // So that program doesn't break
    res.status(200).render('pages/index', {reactApp: reactComp});
})
;

export default router;

Create a directory views which will contain the templates for ejs. Under views, two directories should be made.

pages: this folder contains the templates for pages that will be representing the skeleton for different pages.
partials: this folder contains various partials like headers, footers, etc.

Create a file index.ejs at ./src/views/pages.

./src/views/pages/index.ejs



<!DOCTYPE html>
<html lang="en">
<head>
    <title>Smoke -h</title>
</head>
<body>
<div id="root"><%- reactApp %></div>
<script src="/index.js" charset="utf-8"></script>
<script src="/vendor.js" charset="utf-8"></script>
</body>
</html>

The above-mentioned index.js and vendor.js files are generated by webpack. We will discuss them later.

Add the following script in package.json file.



{
    ....
    ....
"scripts": {
    "webpack": "webpack -wd",
    "dev": "nodemon --exec babel-node src/server.js",
  }
    ....
    ....
}

I'll explain the webpack script in some time.

The server is ready to run. Run the following command.

$ npm run dev

Open a browser and go to http://localhost:3000. You will see a blank page for now.

Creating React Page

Create a components directory under src. This(components) directory has 2 more sub-directories pages and entrypoints. These directories are locations for our react components. We can create additional folders and file later here as we add more components.

pages: This directory stores the final pages that need to be rendered.
entrypoints: This directory store the files that will hydrate our pages. I'll explain this concept later.

Create file index.jsx under project/src/components/pages/. This file is the React page for index route.

./src/components/pages/index.jsx




import React from "react";

class Index extends React.Component {
    constructor() {
        super();
        this.state = {name: "a", email: ""}
    }

    onFormSubmit = (event) => {
        event.preventDefault();
    }

    onNameChangeHandler = (event) => {
        this.setState({name: event.target.value});
    }

    onEmailChangeHandler = (event) => {
        this.setState({email: event.target.value});
    }

    render() {
        return (
            <div>
                <h1>Smoke -h</h1>
                <form onSubmit={this.onFormSubmit}>
                    <div>
                        <label htmlFor={"name-input"} defaultValue={"Name"}>Name: </label>
                        <input name={"name-input"} onChange={this.onNameChangeHandler} type={"text"}
                               value={this.state.name}/>
                    </div>
                    <br/>
                    <div>
                        <label htmlFor={"email-input"} defaultValue={"Email"}>Email: </label>
                        <input name={"email-input"} onChange={this.onEmailChangeHandler} type={"email"}
                               placeholder={"email"} value={this.state.email}/>
                    </div>
                    <br/>
                    <div>
                        <button type={"submit"}>Submit</button>
                    </div>
                </form>
                <span><h5>Name: {this.state.name}</h5></span>
                <span><h5>Email: {this.state.email}</h5></span>
            </div>
        )
    }
}
export default Index;

Rendering React Page on Server Side

We now use renderToString() to render the react components in our ./src/routes/index.js file.

./src/routes/index.js



import express from "express";
import React from "react";
import {renderToString} from "react-dom/server"
import Index from "../components/pages/index"


const router = express.Router();

router.get('/', async (req, res) => {
    const reactComp = renderToString(<Index/>);
    res.status(200).render('pages/index', {reactApp: reactComp});
})
;

export default router;

Now if we run the server. We get our react components rendered. But the page is not reactive.

Hydrating the React Pages

ReactDOM.hydrate() is the function that brings ours react page alive. When we call ReactDOM.hydrate() it preserves the server-rendered markup and attach event handlers to them and provide an entry point into the react application.

To create this entrypoint we create index.jsx under ./src/components/entrypoints/index.jsx.

./src/components/entrypoints/index.jsx



import React from "react";

import {hydrate} from "react-dom";

import Index from '../pages/index'

hydrate(<Index/>, document.getElementById("root"));

But doing so is not enough. This part of the code should run on the client-side. That is why use webpack to bundle this file with libraries to send it to frontend side.

Webpack

Webpack is a bundler. A module bundler is a tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser.

To use webpack we need to create a webpack.config.js file under our project directory.

webpack.config.js



const path = require("path");

const config = {
    entry: {
        vendor: ["@babel/polyfill", "react"], // Third party libraries
        index: ["./src/components/entrypoints/index.jsx"]
        /// Every pages entry point should be mentioned here
    },
    output: {
        path: path.resolve(__dirname, "src", "public"), //destination for bundled output is under ./src/public
        filename: "[name].js" // names of the bundled file will be name of the entry files (mentioned above)
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: {
                    loader: "babel-loader", // asks bundler to use babel loader to transpile es2015 code
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"] 
                    }
                },
                exclude: [/node_modules/, /public/]
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
    } // If multiple files share the same name but have different extensions, webpack will resolve the one with the extension listed first in the array and skip the rest.
};

module.exports = config;

Now run

$ npm run webpack

On another shell run

$ npm run dev

And now when we visit http://localhost:3000 our react app has become dynamic.🎉🎉🎊

Feel free to comment if you have any doubts regarding this.