DEV Community

Cover image for Building a Type-Safe Go Backend for a React Web App
Marcus Kohlberg for Encore

Posted on

Building a Type-Safe Go Backend for a React Web App

In this short guide we'll create and deploy a Go backend for a web app with a React frontend. We'll be using Encore to build a production-ready Go backend, that can be deployed to the cloud without manually setting up infrastructure.

๐Ÿš€ What's on deck:

  • Install Encore
  • Create your app from a template
  • Run locally and try your frontend
  • Deploy to Encore's free development cloud

๐Ÿ’ฝ Install Encore

If this is the first time you're using Encore, you first need to install the CLI that runs the local environment. Use the appropriate command for your system:

  • macOS: brew install encoredev/tap/encore
  • Linux: curl -L https://encore.dev/install.sh | bash
  • Windows: iwr https://encore.dev/install.ps1 | iex

๐Ÿ”จ Create app

When you have installed Encore, create a new Encore application and clone this example:

encore app create my-backend --example=react-starter
Enter fullscreen mode Exit fullscreen mode

๐Ÿ Running locally

Run your Encore backend from your app root directory using:

encore run
Enter fullscreen mode Exit fullscreen mode

In a different terminal window, run the Next.js frontend:

cd frontend
npm install
npm run dev
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Open http://localhost:5173 in your browser to see the result.

React frontend

๐Ÿงช Encore's Local Development Dashboard

While encore run is running, open http://localhost:9400/ to view Encore's local developer dashboard. Here you can make API requests using the API explorer and see traces for any requests you make.

Encore local dev dashboard

๐Ÿค Generate a request client and stay type-safe

Keep the contract between the backend and frontend in sync by regenerating the request client whenever you make a change to an Encore endpoint. This helps ensure end-to-end type-safety.โœจ

npm run gen # Deployed Encore staging environment
# or
npm run gen:local # Locally running Encore backend
Enter fullscreen mode Exit fullscreen mode

๐Ÿš€ Deploy to the cloud

Deploy your app to a staging environment in Encore's free development cloud:

git add -A .
git commit -m 'Initial commit'
git push encore
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘‰ Then head over to the Cloud Dashboard to monitor your deployment and find your production URL.

From there you can also see metrics, traces, connect your app to a GitHub repo to get automatic deploys on new commits, and connect your own AWS or GCP account to use for deployment.

Encore Cloud Dashboard

CORS configuration

If you are running into CORS issues when calling your Encore API from your frontend, then you may need to specify which origins are allowed to access your API (via browsers).

You do this by specifying the global_cors key in the encore.app file, which has the following structure:

global_cors: {
  // allow_origins_without_credentials specifies the allowed origins for requests
  // that don't include credentials. If nil it defaults to allowing all domains
  // (equivalent to ["*"]).
  "allow_origins_without_credentials": [
    "<ORIGIN-GOES-HERE>"
  ],

  // allow_origins_with_credentials specifies the allowed origins for requests
  // that include credentials. If a request is made from an Origin in this list
  // Encore responds with Access-Control-Allow-Origin: <Origin>.
  //
  // The URLs in this list may include wildcards (e.g. "https://*.example.com"
  // or "https://*-myapp.example.com").
  "allow_origins_with_credentials": [
    "<DOMAIN-GOES-HERE>"
  ]
}
Enter fullscreen mode Exit fullscreen mode

More information on CORS configuration can be found in the Encore docs.

๐Ÿ”ฅ Great job - you're done!

You now have the foundations of a scalable and production-ready web app foundation running in the cloud. ๐ŸŽ‰

For real production-scale traffic, you can connect your cloud account (AWS/GCP) and deploy there with a click.

Keep building with these Open Source Encore App Templates.๐Ÿ‘ˆ

If you have questions or want to share your work, join the developers' hangout in Encore's community Slack.๐Ÿ‘ˆ

๐Ÿ“š Learn More

Top comments (0)