DEV Community: bricoo

Deploy create-react-app with react-router on Heroku

bricoo — Sat, 14 Oct 2023 15:28:41 +0000

Most beginner personal web development projects start with using create-react-app. create-react-app is a simple react-based application, prominently used by newcomers as a tutorial. However, it does not lower its quality as a production-ready framework. Coupled with other packages and plugins found in npm registry, we can create a professional website in no time.

Using create-react-app with react-router allows creating routes for our React.js application. This blog will focus on SSR with code bundling to improve performance. Furthermore, we will deploy to Heroku using the production build from npm run build, which acts as a static site rather than dynamic site (npm start).

tl;dr

Read this example on how to enable Server Side Rendering through React Router
Install serve (npm i serve) for serving built static web
Update the Heroku Procfile to web: serve -s build

1. create-react-app with react-router

react-router enables create-react-app application to use routing, primarily Client Side Routing (CSR). However, in this post, we are only going to use react-router for its Server Side Routing (SSR).

A little note about CSR vs SSR

In shorthand, in Server Side Routing (SSR), the user requests a whole new page, while in Client Side Routing (CSR), the user only request changes in data and the page changes accordingly. So, SSR requires the user to download more data (and thus slower) compared to CSR.

react-router focuses on CSR, but we can use it as SSR as well. You can find the tutorial for this in their website (SSR up until Nested Routes section).

SSR through Code Bundling

CSR might have slower initial load since the user needs to download all data, even the ones that they never going to see. Let's say there are 3 routes: /home, /about, and /user. If we use react-router as it is from the tutorial, then the user will download all content in those three pages, although they only open one of the page. Code bundling will solve this issue. Refer this legacy docs for how to implement code bundling.

2. How Heroku Runs create-react-app

This is how Heroku runs create-react-app on default (applies to with or without react-router).

Heroku automatically detects that the app is a Node.js app
Heroku runs npm install, followed by npm run build if it is defined in package.json. create-react-app already defined npm run build.
Heroku looks for Procfile file and all defined processes. Usually this file only contains a single line: web: npm start.
Heroku will run their dynos (server) based on one of these processes.

However, this is not optimized since we are using the development build. Heroku did build the production build, but they still use the development build (note the web: npm start command in Procfile).

Run the Production Build (Static Site) Locally

Using npm start, the website will be run as a dynamic site. If your website has no dynamic or back-end code, then we can build it to be a static website.

First, we need to build the app first by running npm run build. It will create a new directory called build which contains static HTML, CSS, JavaScript, public files, etc. We can not just open the index.html file and expect it to work. We need to run a static server.

There are many different ways to run a static server. In Node.js, you can install packages like http-server, static-server, and serve. In Python, you can use http.server.

We are going to use serve as it is fast and simple to use.

npm install serve
serve -s build

3. Run the Production Build (Static Site) on Heroku

Heroku automatically runs npm run build, but it still run the application using npm start, which is not optimized. We can use serve to run the production build (static site).

Add this dependency in package.json (or just run npm install serve if you're not sure about the version).

"serve": "^14.2.0",

Update the Procfile.

web: serve -s build

That's It

And those are the reasons behind why I did those steps to run create-react-app with react-router on Heroku.

Alternative without `serve` (Using Express)

Instead of installing serve or other static site server, we can create a server.js file in the root directory.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) { // marked
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);

If you use react-router, then change the marked line to app.get('/*', function(req, res)) {.

Also don't forget to update the Procfile.

web: node server.js

And that's it! Now Heroku will run the production build without installing serve or any other application.

Migrate Existing Fastify Project to Use TypeScript

bricoo — Sat, 02 Sep 2023 11:00:30 +0000

Several developers don't use TypeScript when they are starting a project or just trying to implement their new idea. TypeScript could be cumbersome and slow down the development process due to the need to add more code. However, when the project grows larger, it is inevitable that TypeScript can help a lot by catching bug and typing errors. This guide will show you how to migrate your already growing project in JavaScript to TypeScript. Specifically, this post will guide you how to migrate to TypeScript if you use Fastify as your framework.

1. Install Packages

Install these packages by adding --save-dev option

@types/node
'typescript'
ts-node
'fastify-tsconfig'
'concurrently'

npm i -D @types/node typescript ts-node fastify-tsconfig concurrently

If you want to use a testing library tap, also add @types/tap in devDependencies

npm i -D tap @types/tap

2. package.json

Change the script field of package.json into these lines

"scripts": {
    "start": "npm run build:ts && fastify start -l info dist/app.js",
    "build:ts": "tsc",
    "watch:ts": "tsc -w",
    "dev": "npm run build:ts && concurrently -k -p \"[{name}]\" -n \"TypeScript,App\" -c \"yellow.bold,cyan.bold\" \"npm:watch:ts\" \"npm:dev:start\"",
    "dev:start": "fastify start --ignore-watch=.ts$ -w -l info -P dist/app.js"
  },

If you want to enable testing using tap, add this line into scripts

"test": "npm run build:ts && tsc -p test/tsconfig.json && tap --ts \"test/**/*.test.ts\"",

3. tsconfig.json

Create a new tsconfig.json inside the root directory.

{
  "extends": "fastify-tsconfig",
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true
  },
  "include": ["src/**/*.ts"]
}

Note: Modify the include field to your project needs. In my case, all my app is stored inside a /src folder.

4. The App Itself

Change all files that ends with .js to .ts.

`app.js` or `server.js` or `index.js`

This file is the main entry point of your Node.js application

Before:

module.exports = function (fastify, opts) { ... }

After:

export default function(fastify: FastifyInstance, opts: FastifyServerOptions) { ... }

Plugins

Change require("module") to import module from "module", including fastify-plugin.

Before (mongodb.js):

const fp = require('fastify-plugin')

module.exports = fp(async function (fastify, opts) {
  fastify.register(require('@fastify/mongodb'))
})

After (mongodb.ts):

import fp from 'fastify-plugin'
import fastifyMongodb from '@fastify/mongodb'

export default fp(async function (fastify, opts) {
  fastify.register(fastifyMongodb)
})

By using import, TypeScript knows that you will call fastify.mongo somewhere inside your app. Note that Fastify stated that "declaration merging is not very smart" i.e. if you import the plugin somewhere but did not call fastify.register, then TypeScript still assumes that you already registered it.

Furthermore, some plugins have additional rules. Be sure to check their documentation. For example, if you use @fastify/env to load your .config file, you need to add this code.

declare module 'fastify' {
    interface FastifyInstance {
        config: {
            field1: string,
            field2: string
        };
    }
}

export default fp(async function (fastify, opts) {
    const schema = { ... }; // JSON-schema that match data
    const data = { field1: 'Value 1', field2: 'Value 2' };

    fastify.register(fastifyEnv, {
        schema: schema,
        data: data
    })
})

Custom Request

You might want to access a specific request.body or request.query. To tell TypeScript that a request has these fields, you need to create a new type that based on FastifyRequest. Example:

type CustomRequest = FastifyRequest<{
    Body: {
        username: string
    },
    Querystring: {
        product_id: string
    }
}>

function root(fastify: FastifyInstance, request: CustomRequest, reply: FastifyReply) {
    const username = request.body.username;
    const productId = request.query.product_id;
    // ...
}