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:
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
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"babelifyto 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.
Top comments (0)