Add React frontend

With first API route set, let's add React frontend before continuing further. Covering React is out of this tutorial's scope, but there are a lot of React development guides over the Internet that you can check. Even though i will not go into details about React implementation, i will show you how to setup React dev environment and connect to our Gin backend.

If you don't want to manually setup frontend, you can simply copy assets/ directory from RGB GitHub repo into your rgb/ root directory. Beware that before starting server, you will have to run npm install to install all packages required by React command, regardless of which approach you use.

To setup frontend manually, follow steps below.
Most common and easiest way to start writing React app is to use create-react-app tool. Only thing you need to do is position yourself to project root directory and run create-react-app:

cd ~/go/src/rgb
create-react-app assets

This will create new directory assets/ with all required setup for React app development. Important thing to do is to add "proxy": "http://localhost:8080" inside of package.json file. That will instruct React development server to proxy all our request to Gin backend which will be listening on port 8080.

Another thing you will need to add to package.json is "react-router-dom": "^5.2.0", under dependencies to add routing library. Your package.json file should now look something like this (with maybe some different package versions):

{
  "name": "assets",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8080",
  "dependencies": {
    "@testing-library/jest-dom": "^5.12.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Bootstrap will be used instead of writing our own CSS styles. To do that add these lines to public/index.html file:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
      integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Now you are ready to write React frontend. As mentioned before, explaining React is not in the scope of this guide. You can write your own React files, or use source code from RGB GitHub repo that's in assets/ directory. If you prefer to use some other framework or even pure Javscript, that's also possible since our Gin application doesn't care about frontend technology. This part is entirely up to you.

When everything is set, start React development server by running npm start.

Comments

[Travis Tennies]

This tutorial sucks. I'm out.

[Travis Tennies]

create-react-app: command not found