Build & Deploy a Serverless React App & Add OAuth in 6 Easy Steps!

Jenna Ritten - Sep 14 '21 - - Dev Community

Welcome back to Tutorial Tuesday!

In honor of Preptember, and in preparation for Hacktober, this week I'll show you how to create a serverless React app from scratch, add OAuth with IBM App ID and deploy to IBM Code Engine for FREE! I've included links to all the external resources, including the GitHub repo HERE. Happy Hacking!

IBM Cloud Serverless React App w App ID Google/Facebook OAuth

Create an IBM Cloud Pay-As-You-Go Account.

You will only be using the Free Lite Tier services.

1. Create an Instance of App ID

2. Create a React App

3. Add App ID to React App

4. Push Your Code to GitHub

5. Deploy a Serverless React App to IBM Code Engine

6. Login to the App w App ID OAuth

1. Create an Instance of App ID

Create an App ID Instance; Choose the Lite Tier Plan

From the menu on the right, select Applications.

Click Add Application.

Add a Name, and select Single-page application from the Type dropdown menu.

Expand and view the app credentials. Note the cliendID and the discoveryEndpoint. We'll need these later.

2. Create a React App

Create a React app below, clone this repo, or use the sample app.

Note: If it's been a while since you've used the create-react-app command, it has been depricated. You will need to uninstall and re-rerun the command.

Uninstall create-react-app command globally from both npm and yarn:

uninstall from npm

npm uninstall -g create-react-app
Enter fullscreen mode Exit fullscreen mode

uninstall from yarn

yarn global remove create-react-app
Enter fullscreen mode Exit fullscreen mode

Re-run the create-react-app command to setup a frontend build pipeline; give your app a name:

npx create-react-app <APP_NAME>
Enter fullscreen mode Exit fullscreen mode 
npx create-react-app ibm-react-app
Enter fullscreen mode Exit fullscreen mode

Move into your project directory:

cd  <APP_NAME>
Enter fullscreen mode Exit fullscreen mode 
cd ibm-react-app
Enter fullscreen mode Exit fullscreen mode

See Documentation

Add react-dotenv to the App

Load environment variables dynamically for your React applications created with CRA (Create-React-App).

Install the react-dotenv package:

npm install react-dotenv
Enter fullscreen mode Exit fullscreen mode

Open your project's package.json file and: (already updated in the package.json)

  • Add an .env file to your project root (or just load from the system environment variables).
  • Add the react-dotenv NPM command to your start, build (and your serve commands).
  • Add the react-dotenv.whitelist property to package.json to specify which variables you need exposed.

See Documentation

3. Add App ID to the App & Add App ID Credentials to .env

Install the IBM Cloud App ID SDK:

npm install ibmcloud-appid-js
Enter fullscreen mode Exit fullscreen mode

In the /src folder of the app, open App.js in your text editor. (see sample app's App.js)

Import App ID by adding the following code:

import AppID from `ibmcloud-appid-js`;
Enter fullscreen mode Exit fullscreen mode

In the main App() function, declare a new App ID instance.

Initialize App ID, and add error-handling. Add your cliendID and discoveryEndpoint, which can be found in the Applications tab, on the left of the App ID dashboard.

Create a login function that will execute after the login button is clicked.
After successfull authentication, the welcomeDisplayState will be set to true, and the userName will be set to the name value returned with the App ID token.

Add a welcome <div>, a login <button> that calls the login function(), and an error <div>.

Start the application, and run it locally:

npm start
Enter fullscreen mode Exit fullscreen mode

Update the redirect_uri in the App ID dashboard in the Authentication Settings under the Manage Authentication tab on the left.

DO NOT SKIP: Add web direct URLs

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

See Documentation

View the Live Application

View your locally deployed application!

http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

4. Push Your Code to GitHub

Create a new GitHub repository; add a Repository name, and click Create repository.

Note: Initialize the repo with a name and an MIT license.

Clone the Starter-Kit repo, copy the ibm-react-app into a new directory, add the remote origin to the local initialized project, and set it upstream.
Push your code from the CLI to the new repository.

git remote add origin https://github.com/<PROFILE_NAME>/<REPO_NAME>.git
git branch -M main
git push -u origin main --allow-unrelated-histories
Enter fullscreen mode Exit fullscreen mode

Now you're good to go!

(see sample app's Dockerfile)

5. Deploy a Serverless React App to IBM Code Engine

Login to Your IBM Cloud Account w the IBM Cloud CLI

Login to your IBM Cloud account.

ibmcloud login
Enter fullscreen mode Exit fullscreen mode

View available resource groups.

ibmcloud resource groups
Enter fullscreen mode Exit fullscreen mode

Assign a target resource group.

ibmcloud target -g Default
Enter fullscreen mode Exit fullscreen mode

Update the Region to eu-gb.

ibmcloud target -r eu-gb
Enter fullscreen mode Exit fullscreen mode

Create a Code Engine Project

Create a new Code Engine project and give it a name.

ibmcloud ce project create --name <NAME>
Enter fullscreen mode Exit fullscreen mode 
ibmcloud ce project create --name ufhacks
Enter fullscreen mode Exit fullscreen mode

Verify you're in the newly created project.

ibmcloud ce project current
Enter fullscreen mode Exit fullscreen mode

OPTIONAL: View your list of CE projects.

ibmcloud ce project list
Enter fullscreen mode Exit fullscreen mode

OPTIONAL: Select the CE project you want to use.

ibmcloud ce project --name <NAME>
Enter fullscreen mode Exit fullscreen mode 
ibmcloud ce project --name ufhacks
Enter fullscreen mode Exit fullscreen mode

Create a Code Engine Application from Source Code

Create a new Code Engine application from source code, and give it a name.

YOU CAN DO THIS FROM THE CODE ENGINE CONSOLE UI
Enter fullscreen mode Exit fullscreen mode

OPTIONAL: Deploy the App to Code Engine from a Container Image

Deploy the app to CE from a container image. (by default, CE uses Dockerhub registries for repos containtining a Dockerfile unless specified otherwise)

ibmcloud ce application create --name ibm-react-app --image ibmcom/ibm-react-app
Enter fullscreen mode Exit fullscreen mode

Get the app URL.

ibmcloud ce application get -n ibm-react-app -output url
Enter fullscreen mode Exit fullscreen mode

View the Deployed Application

View your serverless app deployed to Code Engine!

<OUTPUT_URL>
Enter fullscreen mode Exit fullscreen mode

DO NOT SKIP: Add the <OUTPUT_URL> to package.json

Update the package.json react-dotenv.whitelist property URL to the Code Engine app URL.

    "react-dotenv": {
    "whitelist": ["<OUTPUT_URL>"]
  }
Enter fullscreen mode Exit fullscreen mode

DO NOT SKIP: Add the <OUTPUT_URL> to App ID Redirect URIs

Update the redirect_uri in the App ID dashboard in the Authentication Settings under the Manage Authentication tab on the left.

Add web direct URL

<OUTPUT_URL>
Enter fullscreen mode Exit fullscreen mode

6. Login to the App w App ID OAuth!

Login to your app with Facebook OAuth, Google OAuth, and IBM Cloud Directory!

<TEST_IT_OUT!>
Enter fullscreen mode Exit fullscreen mode

NOW YOU'RE READY TO GET OUT THERE AND HACK TOGETHER SOMETHING AMAZING!

Alt Text

Connect w Me!
https://linktr.ee/jritten

Image
The Most Pervasive Issues In Self Propelled Wheelchair
Image
The People Nearest To Self Propelled Wheelchairs For Sale Share Some Big Secrets
Image
This Is A Guide To Adult Mental Health Services In 2023
Image
20 Accident Lawyers Websites That Are Taking The Internet By Storm
Image
Watch Out: How In The Wall Fireplace Electric Is Taking Over And What Can We Do About It
Image
12 Companies That Are Leading The Way In All Terrain Self Propelled Wheelchair
Image
Cisza i Spokój: Sztuka Wyciszania Mieszkań
Image
Building a Video Room Management API: Integrating Go, Twilio, and Zap Logging
Image
20 Trailblazers Leading The Way In Personal Injury Compensation
Image
Storybook: The Workshop for Modern Frontends

angular, storybook, webdev, frontend
Image
Why Install a Double Glazing Cat Flap?
Image
CKA Full Course 2024: Day 13/40 Static Pods, Manual Scheduling, Labels, and Selectors in Kubernetes

webdev, javascript, kubernetes, docker
Image
The Reasons You're Not Successing At Exposure To Asbestos Lawsuit
Image
How to create an App Service Application and upload into it (WEB APP)

beginners, cloud, azure, learning
Image
Symfony Station Communiqué — 01 November 2024. A look at Symfony, Drupal, PHP, and programming news!

symfony, drupal, php, typo3
Image
17 Reasons Not To Ignore Cheap Couches UK
Image
Cisza w Mieszkaniu: Jak Wyciszyć Swój Kąt i Osiągnąć Spokój
Image
Check Out The Lost The Car Key Tricks That The Celebs Are Using
Image
Cisza w Twoim Domu: Jak Wyciszyć Ściany i Osiągnąć Spokój
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .