5 - Build the Leaf Client

The Leaf client application is written in React and TypeScript using Node Package Manager (NPM) and Create React App, a bootstrapping library maintained by Facebook.

Like the Leaf API, Leaf Client as available on GitHub is not yet built for production.

Info

As an alternative to compiling the client code yourself, you may also download the latest pre-built Leaf client from the Leaf Releases page on GitHub. If you download the pre-built version, you can skip ahead to 6 - Configure the appsettings file.

1. Install dependencies

   $ cd /var/opt/leafapi/leaf_download/leaf/
   $ cd src/ui-client/
   $ npm install
   

2. Build the client

   Next we need to build, which transpiles TypeScript and TSX/JSX to JavaScript, minifies the code, and outputs a bundle which we can point Apache or IIS to. To build, execute:

   $ npm run build
   

   This outputs a build bundle to a new src/ui-client/build/ folder.

   Make sure you are using NodeJS version 14.9.0+ and NPM version 6.14.8+ when building the Leaf client. See the troubleshooting page for more information

3. Deploy build artifacts

   The final step is to copy the /build folder contents to a directory on the web server that Apache/IIS can serve to users. As we haven't configured Apache or IIS at this point, however, for now just take note of the location of the /build folder.

   For more information on building and deploying React apps, see the Create React App deployment page.

Info

In case you're wondering why we're building the Leaf client on the app server (rather than the web server), it's because we've downloaded the Leaf source code on the app server, so for now that's where we'll start. Later, if using a separate web server, we'll copy the production client build code to the web server.

Wrapping up

At this point, your Leaf directory on the app server should look similar to this:

var
├── opt
│   ├── leafapi
│   │   ├── keys                           # JWT signing key
│   │   ├── api                            # Compiled API
│   │   ├── leaf_download                  # Downloaded source files 
│   │   │   ├── leaf 
│   │   │   │   ├── src 
│   │   │   │   │   ├── ui-client 
│   │   │   │   │   │   ├── build          # Built Client
│   │   │   │   │   │   │   ├── static     #########################
│   │   │   │   │   │   │   ├── images     # 
│   │   │   │   │   │   │   ├── index.html # Production Client files
│   │   │   │   │   │   │   ├── manifest   #
│   │   │   │   │   │   │   ├── ...        #########################
├── log 
│   ├── leaf                               # Log files

Next: 6 - Configure the appsettings file