The create-react-app installation process, now with added emojis!

Setting it up

First off, get create-react-app running.

npm install -g create-react-app

Then you can make a new app, which will take a while, so maybe make yourself a coffee? It’ll take the edge off that daytime wine you had.

create-react-app app-name

When the installation completes, jump into the directory and install some fancy dependencies.

cd app-name && yarn add react-router-dom react-helmet react-snapshot styled-components

Also, you 100% do not need to use yarn if you don’t want to. npm is also great, but yarn is super fast, and let’s face it we’re all still reeling from that whole create-react-app installation waiting game. Plus it has emojis!

react-snapshot requires a couple of quick changes to the default create-react-app setup.

First off, change your package.json build option.

"build": "react-scripts build && react-snapshot"

And then patch up the default src/index.js.

import React from 'react';

import { render } from 'react-snapshot';

import App from './App';

import './index.css'; render(

<App />,

document.getElementById('root')

);

And voila. If you run yarn build , you’ll see some sweet snapshot magic.

$ react-scripts build && react-snapshot

Creating an optimized production build...

Compiled successfully.

✏️ Saving / as /index.html

🕸 Finished crawling.



✨ Done in 11.06s. 🕷 Starting crawling http://localhost:2999 ✏️ Saving / as /index.html🕸 Finished crawling.✨ Done in 11.06s.

As you can see, react-snapshot is taking the app and outputting a static index.html .

It might not look like much, but it’s so great.

Still, it doesn’t do much about the key areas that a search engine is looking at—the title and metadata in the head. That’s where react-helmet comes in. It is a component that helps you manage the document head, meaning while someone navigates your app, your metadata stays in sync.

Here we’re populating the title with “You Are Doing Great”, which is true, using the Helmet component. It displays in your browser tab, and all is well with the world.

Unfortunately, when viewing the source, the <title> is still React App .

ლ(ಠ益ಠლ)

That’s where react-snapshot comes in. By using react-snapshot in conjunction with react-helmet , you can pre-populate both the head of each route, and the body, on server and client side. It is literally win-win. So let’s build it.

yarn build

✏️ Saving / as /index.html

🕸 Finished crawling. 🕷 Starting crawling http://localhost:2999 ✏️ Saving / as /index.html🕸 Finished crawling.

And when we look at the generated index.html ?

<title>You Are Doing Great</title>

Omg, see? Even the server gets it.