Driving Lyrid Function Execution From a React Single Page Application (SPA) Hosted in Github Pages

Handoyo Sutanto
Dec 30, 2020 · 6 min read

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

Create an 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

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

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

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

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

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

Lyrid

Rapid Application Development and Distribution With Serverless

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store