Let’s continue from our previous tutorial by building a front-end web application from what we learned. We went through how to build a serverless NodeJS 12.x Express application backend that utilizes Sharp image processor:

https://medium.com/lyrid/building-and-distributing-nodejs-12-x-express-serverless-application-with-lyrid-5ed18345b122

In this tutorial, we will use GitHub’s awesome feature that helps web application developers to host their static page applications onto a working website for free. Just like our services, no credit card is required to host your static page.

We will show you how to build a simple React SPA that calls into the API that was built in the previous tutorial.

Prerequisites

• Lyrid Account: Register Here To Start Lyrid
• Go through our previous post: https://medium.com/lyrid/building-and-distributing-nodejs-12-x-express-serverless-application-with-lyrid-5ed18345b122
• GitHub Account: https://github.com/join

Create an Execute Only Access

First thing to do is to create an execute only access and secret key. Why execute only access?

The reason is because we will be hosting the access key and secret on our front end, and the credential will be exposed by anyone that are able to open your front-end application. The execute only access keys will only be able to execute function inside your account, and this access key will not be able to do any administrative functionality.

To do this, go to your account settings page, and click on the IAM tabs: https://app.lyrid.io/app/settings/account

Give the key some name, and make sure the restrict access flag is checked, and then click on Generate Keys.

Store the access key and secret someplace, and we will use them on the later part of the tutorial.

Setup GitHub Pages

For this tutorial, we have setup a GitHub repo template that can help you bootstrap the project faster:

https://github.com/LyridInc/react-staticpage

Click on Use this template button. And fill the appropriate form:

When creating a new repository with this template, please ensure that you check that “Include all branches” settings. This will copy the branch that is hosting the static files as well.

Now that you have copied this template, you will need to clone them into your local machine:

git clone https://github.com/{GitHub-Username}/{GitHub-ProjectName}.git
cd {GitHub-ProjectName}

And there’s a few things your will need to change in this template:

• .env — This is where you will be putting your execute only access and secret key.

REACT_APP_LYRID_EXECUTE_KEY=<RestrictedAccessKey>
REACT_APP_LYRID_EXECUTE_SECRET=<RestrictedSecretKey>

• package.json — Change the homepage settings URL at the very top. The format for the URL is as follows:

"homepage": "https://{GitHub-Username}.github.io/{GitHub-ProjectName}/",

In our case, it will be:

https://lyridinc.github.io/react-staticpage/

• src/helpers/api.js — (Optional) This is where you put Lyrid API endpoint URL if you changed any names in the previous tutorial.

Now, lets test and run this locally by running:

npm install
npm start

React App Template

Now, let’s explain a little bit about this react application template that you just copied into your GitHub account. This template is created using create-react-app @ https://create-react-app.dev/, and modified to host our components to drive the API calls.

There are some libraries that we want to mention for this front-end:

• Axios Instance Routing

At src/helpers/api.js, we use this library called axios (https://github.com/axios/axios) to call into our API that we developed on the previous post.

During development, you can change the axios instance to call into your localhost by commenting out the production instance and use the localhost instance instead:

• React Hooks

Most of the components for the UI are built using the newer way of building react functional components with React Hooks (useState and useEffect). Which allows a more flexible and easier to understand code.

We created simple controls that loads an image URL and binds user’s input into the query parameter requests of the backend API. We then show the output of API which is the processed image as the user changes the input.

More about React Hooks here: https://reactjs.org/docs/hooks-intro.html

Modifying CORS for Server Side

Because we will be running API calls from a browser hosted on a cross-site resource, we will be requiring to setup Cross-Origin Resource Sharing (CORS). This allows your front-end to pass authenticated messages using the browser into your serverless function call.

Cross-Origin Resource Sharing (CORS) is an HTTP-header based mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources.

CORS is a server side settings, and we will need to make these changes on the backend project. Open the src/entry/entry.js file and add these following code snippet and change the Origin URL appropriately to your hosted GitHub Pages URL:

var cors = require('cors')
var corsOptions = {
origin: [ 'http://localhost:5000', 'https://{GitHub-Username}.github.io' ],
 credentials: true,
}
app.use(cors(corsOptions))

Here is how our CORS settings looks like:

After making the appropriate CORS changes and run the code submit again to update the server side API:

lc code submit

Deploy the Static Page

Now that we setup all the required codes and backend, we can deploy the react static pages using this following command on the react project:

npm run deploy

You may be prompted with GitHub credential login to authenticate if you have access to check into your repository. Just fill in your GitHub username and password and viola! Once the deployment is complete, you can access your web application at:

https://{GitHub-Username}.github.io/{GitHub-ProjectName}/

That’s it! You have just hosted a full web application that has a React front-end and ExpressJS Serverless back-end! Check out the output GitHub page that we deployed for this tutorial:

https://lyridinc.github.io/react-staticpage/

And with that, you can start hacking away and let us know what you are building with our platform!

Conclusion

This tutorial translates to any static page hosting service that you can think of. We like GitHub Pages just because it is free and straight-forward, and there are more features available in GitHub Pages that we have not explored in this tutorial: https://pages.github.com/

We would like to also add that we also have support for our own domain support for static pages with the ability to add your own custom domain into your functions or web servers. We are still working on the release for this feature, but if you like us to help you set up a custom domain, just let us know!

And with that, you can register a Free Lyrid account to get started with this following link and try these all yourself:

Register Here To Start Lyrid

Lastly, please do not be shy to contact me at hsutanto@lyrid.io or join our Slack channel to say hi and let us know if there are any issues for you following this example.

Thank you for reading, stay tuned for more tutorial and how-to guides!

Merry Christmas and Happy New Year! Stay safe!

Handoyo