How to use React in a static site

Traditionally, to use React in your project you set up it over a Node.js environment, either you use "create-react-app" what is the most common and easy way or making it manually what will take a bit of time to do. However, you just need a static site, but you want to use the React's features, what to do?

First, you still need a Node.js environment, it just to "compile" your Node.js code to browser compatible code. Basically, it is all I have been done for this little tutorial.

Let's install the packages what we will use.

The packages are:

babel
- @babel/preset-env
- @babel/preset-react
browserify
- babelify
react
- react-dom
- react-router-dom

It does not difference if neither you use this packages as development dependency nor it does not because you will "compile" it to a bundle and call it inside your HTML.

The minimum needed

You can choose how to organize your project. My project is this.

├── env.json
├── package.json
├── src
│   ├── client.js
│   ├── nano.js
│   └── ui
│       ├── alert
│       │   └── index.jsx
│       └── index.jsx
└── www
    ├── bundle.js
    ├── image.gif
    └── index.html

You could see it in my GitHub.

What does the magic of "compile" our Node.js code to browser code is the browserify command

browserify src/ui/index.jsx -o www/bundle.js -t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]

Let me cut this command into pieces.

"browserify" is the base command.
"src/ui/index.jsx" is the entry file of our front-end. Everything under it will be "compiled"
"www/" You could add all you want to your front-end like "CSS", videos, images and so on.
"www/bundle.js" is the "compiled" file, what contains all our code in a file ready to run in browser
"-t [ babelify --presets [ @babel/preset-env @babel/preset-react ] ]" this transform your code using the "plugin" babelify to it.

The most important file here is the "src/ui/index.jsx" because from it, all code imported will be "compiled" to bundle.js.

In my file, I added the router and the Home component at the same place, what could not be a good practice to a greater project.

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Switch, Route } from "react-router-dom";

import Alert from "./alert/index.jsx";

export default function Home() {
  return (
    <>
      <h1>Home</h1>
    </>
  );
}
ReactDOM.render(
  <BrowserRouter>
    <Switch>
      <Route path="/" exact={true} component={Home} />      
      <Route path="/alert" exact={true} component={Alert} />      
      <Route path="/alert/:wallet" component={Alert} />      
    </Switch>
  </BrowserRouter>,
  document.getElementById("root")
);

The HTML code of "index.html"

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#ffffff" />

    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> 

    <title></title>

    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/bundle.js"></script> <!--This is bundle imported into our HTML-->
  </body>
</html>

Configuring your server

Unfortunately, you could not just throw it on a server and run it, but it is almost. For everything runs okay you need "redirect" all inputs from the web server for our "index.html", the "react-router-dom" will manager this input and give for our front-end the power to access URL parameters and queries.

I know you can do it on Apache and Nginx in they configure files. The Nginx file is "/etc/nginx/sites-enabled/default" in an Ubuntu Desktop. After find your config file, add a little snippet to this file.

location / {
    try_files $uri /index.html;
}

Deploying

If you are using the default configuration of Nginx, as an example, goes to "/var/www/html" and add the content from "www" the folder into it and see your static site with React powers goes out.

Thanks for reading and I expected it to engage you to try it by yourself. Feel to comment, correct me or just say a "hi", I would like too much.

How to use React in a static site

The minimum needed

Configuring your server

Deploying

Did you find this article valuable?