Preparing for Production

Now that you've seen the app working in dev mode, the final step is getting it ready for production.

While this section explains the process of creating a production build for your React frontend and updating the Gin backend to serve static files, it's important to note that there are several additional steps you'd need to consider before deploying an app like this into production. These steps include:

• Storing passwords securely in the database instead of as plain text
• Adding authentication to all API endpoints to check that a user is authorized to make any given API request
• Using WebSockets for notifications of new messages in a channel instead of polling every five seconds

Serving Static Files with Gin

As it stands, your Gin backend can answer API requests but doesn't know how to serve the HTML and JavaScript your React production build will generate. Fortunately, it's easy to add this functionality.

First, create a production build of your frontend by opening another GoLand terminal, running cd chat-ui, and then running npm run build. This builds your app's frontend in the chat-ui/build subdirectory. If you look in the build directory, you'll notice that index.html sits at the root and all the frontend JavaScript is in build/static.

Now, you need to tell Gin where to find the frontend files. Open main.go, scroll to the main function, and then find the line near the end of the function when you start the Gin server:

err = r.Run(":8080")

Immediately before that line, add the following:

// Explicitly serve index.html at the root
r.StaticFile("/", "chat-ui/build/index.html")
// Serve static files under /static
r.StaticFS("/static", http.Dir("chat-ui/build/static"))

See here for a look at how it all fits together in context. Explicitly setting a static index.html and a separate /static route ensures that none of your static file routes conflict with your API routes.

With that change done, run the backend server by clicking the run button in GoLand like you did earlier.

Then, open a web browser and navigate to http://localhost:8080. You'll see that your Gin app now serves the production build of your React app, and you can sign in and chat the same way you did earlier.