DEV Community

loading...
Cover image for How to use React in a static site

How to use React in a static site

henrybarreto profile image Henry Barreto Originally published at henrybarreto.dev ・3 min read

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
  • 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. Me 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
Enter fullscreen mode Exit fullscreen mode

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 ] ]
Enter fullscreen mode Exit fullscreen mode

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")
);
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide