Deploying the frontend application

Once you are done with the frontend code, it will need to be transformed into a form that can be shared and copied to production server environments, without needing to reinstall all the Node.js tools and dependencies that were needed in the development process. 

The React framework comes to the rescue here. When we created our React application in Chapter 4Frontend with React.js, and Chapter 5, Building a Frontend for GoMusic, we used a tool called create-react-app to create our application and set up the toolchain. The tool supports some scripts that we can use to run and build our React application. We already mentioned the npm start command, which was used to run our React app in development mode, so that we can run our code and debug in real time as we are developing the application.

There is a script that is vital for getting our React app ready for production use and is called build. To run this script, we simply type the npm run build command from the main folder of our React app. This command will compile our entire application to some static files, which we can then serve directly from our Go app. The output of the build script goes to a folder called build, which gets created in our React app root folder.

Let's call this folder the React build folder. We can then copy this build folder anywhere and get our Go app to utilize it to serve the GoMusic app frontend.

Here are the steps that we need to follow in our Go code to be able to serve the React output build folder.

First, we need to import a Gin middleware called static, which we can do by executing the following command:

go get github.com/gin-contrib/static

We will need to go to our rest.go file, which hosted our HTTP route definitions. This file can be found in backendsrc est.go. Inside rest.go, we will import the Gin static middleware:

import (
"fmt"
"github.com/gin-contrib/static"
"github.com/gin-gonic/gin"
)

Inside the RunAPIWithHandler function, which includes all of our HTTP route definitions, we will replace the code that's used to serve our img folder with code that serves all static files from the build folder that was generated by the React app. Here is what this will look like:

//remove this line: r.Static("/img", "../public/img")
//This assumes the React app 'build' folder exists in the relative path '../public'
r.Use(static.ServeRoot("/", "../public/build"))

The first argument of the static.ServeRoot() function is the relative HTTP root URL for our web application, while the second argument is basically the location of the React build folder.

We will also need to move the img folder, which included all of the images of our musical instruments, so that it is inside the build folder. Now, the build folder has all of the assets for our web application.

That's all we need to do. Now, we can just build our Go app into a single executable file by either using the go build or the go install command. Then, we can copy our executable web application along with the React build folder to wherever we would like to deploy our web application.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.16.66.156