Building a React App With Server-Side Swift

Serving the App With Vapor

Why should you pay for a hosting service while using Vapor for your backend? It’s very straightforward to host your React app on your Vapor server.

React handles the navigation with React Router. You only need to serve the index.html file and all the other assets. React Router reads the path from the browser and shows the appropriate page.

Copy the contents of the build folder inside the Public folder of the Vapor app.

You’ll have to add a small piece of code to your Vapor server before you can test your app.
Open backend-vapor/Sources/App/routes.swift and add this function at the bottom of the file:

/* Function that returns the content of the `index.html` file from the Public folder */
func serveIndex(_ req: Request, _ app: Application) -> Response {
  return req.fileio.streamFile(at: "\(app.directory.publicDirectory)/index.html")
}

Thanks to the serveIndex() function, you can return the content of the index.html file present in the Public folder. You need this function to serve the index.html file for the / path.

Inside the routes(_ app: Application) function of the routes.swift file, add these lines:

// 1
app.get { req in
  return serveIndex(req, app)
}

// 2
app.get("*") { req in
  return serveIndex(req, app)
}

Here’s what it does:

1. Serves the index.html file when Vapor receives a GET request for the / path.
2. This piece of code is only needed if you’re using the BrowserRouter in your React app. With this route, you tell Vapor that if there’s a GET request at the base path /, and if the Public folder has no file of that name, it returns the contents of the index.html file.

If you’re running Vapor from Xcode, make sure to set the working directory of your project.

Now, run your Vapor server and navigate to http://127.0.0.1:8080 to test your app.

Where to Go From Here

You can download the complete project using the Download Materials button at the top or bottom of this tutorial.

In this tutorial, you’ve seen the basics of a React app, but if you want to discover React’s more advanced features, you should check its documentation.

If you want to learn more about React Router, check out the documentation or take a deep dive into it.

The React Bootstrap library gives you a lot of prebuilt components. Check out the documentation if you want to learn more.

Consider looking at Next.js, a React Framework that uses React for building the UI and allows it to handle routing, data fetching and more in a more straightforward way. With Next.js, you can also render the page server-side or create an API endpoint!

To learn more about the backend code in this tutorial, check out Server-Side Swift with Vapor.

Thank you for taking the time to read this tutorial! If you have any questions or comments, please join the forum discussion below.