How to use React in a static site

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
  • 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 (
    
      

Home

); } ReactDOM.render( , document.getElementById("root") );
Enter fullscreen mode Exit fullscreen mode

The HTML code of “index.html



  
    
    
    

    
 

    

    
      html, body {
        margin: 0;
        padding: 0;
      }
    
  
  
    You need to enable JavaScript to run this app.
    
/bundle.js
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.

from Tumblr https://generouspiratequeen.tumblr.com/post/641394817803468801

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s