Building a React App With Server-Side Swift

React.js is the most popular JavaScript library used for building dynamic web apps. It is straightforward to learn, lets you quickly create complex apps, and provides good performance.

In this tutorial, you’ll see how to create MyBrary, a simple web app that manages your book library.

You’ll learn how to:

• Develop a simple React app.
• Make different pages with React Router.
• Make requests to the Vapor server from React.
• Serve the React app from Vapor.

Getting Started

Download the starter project by clicking the Download Materials button at the top or bottom of the tutorial.

The starter project includes a backend application with a simple REST API that allows you to save and browse a collection of books. Open a Terminal window and navigate to the starter/backend-vapor folder. Now, run the following:

swift run

The first time you run this command, it can take a while because it has to fetch all the dependencies and compile all the code. However, after the first run, it should be fast to compile the changes you’ve made to the app. When the command finishes, you’ll see the following message:

[ NOTICE ] Server starting on http://127.0.0.1:8080

Now open a new Terminal window and enter the following command:

curl http://127.0.0.1:8080/books

This will return a JSON-formatted list of books, like this:

[
  {
    "id": "59AB6499-EB0A-4AAA-AA91-BDF0DAA4E3F1",
    "author": "Logan Wright, Tim Condon and Tanner Nelson",
    "title": "Server-Side Swift with Vapor"
  },
  {
    "id": "6F7B5287-6F8D-4324-8307-63A337BFF0A4",
    "author": "Scott Grosch",
    "title": "Concurrency by Tutorials"
  }
]

The backend part is ready. Now, it’s time to work on the frontend!

Before starting the tutorial, install Node.js if you don’t already have it on your machine. This is because React apps need Node.js to run the development server, pack the build version and manage dependencies.

Installing Node.js and npm

To create and run your React app, you have to install Node.js and its package manager, npm. The procedure is straightforward using nvm, a tool that helps you manage your Node installation. To install nvm, open a new Terminal window and run this command:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

After that, close and reopen the terminal, and let nvm install Node with this command:

nvm install node

This will install the latest version of Node. At this point, grab a cup of coffee and wait for the completion. It can take a while.

Once the installation has completed, make the installed Node version the default one, using the alias command:

nvm alias default v18.4.0

Now, you are all set. It’s time to build a React app!

Creating the React App

You’ll use the create-react-app CLI to set up your React project with one command.

In a new Terminal window, type this command to create your new app:

npx create-react-app frontend

npx is a package runner: It automatically downloads and updates the package before executing it. With npx, you can run create-react-app without worrying about installing it or keeping it updated. frontend refers to the project’s name.

After you’ve created the project, use this command to navigate to the new project folder.

cd frontend

You’re now in the working directory of your new project. From here, you can add dependencies and run your app.

Adding Bootstrap Theme and React Router

React is a framework that only handles drawing the interface on the browser. Therefore, if you want to add more features to React, you have to install additional packages.

Still in the frontend folder, run the following command:

npm install react-bootstrap bootstrap react-router-dom

Using npm install, you’re telling the Node Package Manager to install the specified packages in the current working directory:

• react-bootstrap is the React version of Bootstrap, a powerful toolkit for building responsive websites.
• The react-bootstrap library needs bootstrap to use Bootstrap in your app.
• react-router-dom is a library that handles the routing client-side. Using React Router, you don’t need to use any fancy hosting platform for your app.

Now, open src/index.js, and add this line right before the const root declaration:

// Allows you to use Bootstrap on every page of the app
import 'bootstrap/dist/css/bootstrap.min.css';

This will include Bootstrap on every page of your app.

It’s now time to start the development server for your first React app. Run this command from the frontend folder:

npm start

After a few seconds, your browser will open a new page showing you React’s starting page, available at the URL http://localhost:3000.

Note that you only have to run this command once. After that, every time you edit a file, React automatically updates the page on your browser.

Now, the React app is running — in development mode — and so is the Vapor app. It’s time to hook them up, but first you’ll take a look at the project structure.

Understanding React App Structure

Before you dive into the creation of the app, you should know the project’s structure:

• The node_modules folder contains all of your app’s dependencies. Don’t touch this folder because npm automatically generates and updates it.
• Inside the public folder, you can put any asset your app should access, like images, stylesheet files, etc.
• The src folder is your working directory; you’ll create your components inside this folder.
• npm uses the package-lock.json file to track all the dependencies you’ve installed. You should not edit this file.
• To change your app’s dependencies, you edit the package.json file.

Creating the BookList Component

You can compose a UI with React by combining different components. A component is a JavaScript function — or a class — that receives an input and gives a React element as output.

You’ll start with a component to list the books present in your library.

Within the src folder, create a new file called BookList.js, and add the following code:

import { useState, useEffect } from "react";
import { Container, Row, Stack, Button, Table } from "react-bootstrap";
import { NavLink } from "react-router-dom";

// 1
function BookList() {
  // TODO: Define variables and functions needed
  return (
    <>
      {/* 2 */}
      {/* TODO: Replace with React components */}
    </>
  );
}
// 3
export default BookList;

Here’s what this code does:

1. Defines the component called BookList.
2. Lets you compose your interface using React components.
3. Exports the component so other components can use it. For example, you can use this component inside the index.js file.

Your first custom component is now ready, but to use it, you’ll need to set up the routing of the React app.