Add React frontend
Tags: go, gin, react
Published: 2021-06-24 16:49:16

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](https://github.com/matijakrajnik/rgb) 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](https://github.com/facebook/create-react-app) tool. Only thing you need to do is position yourself to project root directory and run `create-react-app`:

```bash
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):

```json
{
  "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:

```html
<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](https://github.com/matijakrajnik/rgb) 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`.