-
Use THIS sample app: https://github.com/jritten/test-app
Install NVM with cURL command:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
Install node v14.18.1:
nvm install v14.18.1
Set default node version to v14.18.1:
nvm alias default v14.18.1
Use node v14.18.1:
nvm use default
Create an IBM Cloud Account.
You will only be using the Free Lite Tier services.
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.
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
uninstall from yarn
yarn global remove create-react-app
Re-run the create-react-app command to setup a frontend build pipeline; give your app a name:
npx create-react-app <APP_NAME>
npx create-react-app appid-openshift
Move into your project directory:
cd <APP_NAME>
cd appid-openshift
Load environment variables dynamically for your React applications created with CRA (Create-React-App).
Install the react-dotenv package:
npm install react-dotenv
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).
touch .env
- Add an appid-openshift.env file to your project root (or just load from the system environment variables).
touch appid-openshift.env
- 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.
- Add REACT_APP_CLIENT_ID=<ADD_APP_ID_CLIENT_ID> to the .env files (we'll add the values from App ID later).
- REACT_APP_DISCOVERY_ENDPOINT=<ADD_APP_ID_DISCOVERY_ENDPOINT> to the .env files (we'll add the values from App ID later).
- Add PORT=8080 to the .env files to expose the application to the port to run on OpenShift.
Add App ID to the App & Add App ID Credentials to .env
Install the IBM Cloud App ID SDK:
npm install ibmcloud-appid-js
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`;
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
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:8080
View your locally deployed application!
http://localhost:8080
Commit your changes to the local project directory.
git add .env
git commit -m "Add .env file for environment variables."
git add appid-openshift.env
git commit -m "Add appid-openshift.env file for openshift environment variables."
git add App.js
git commit -m "Update React app w App ID instance login."
git add .
git commit -m "Update React app w react-dotenv and ibmcloud-appid-js."
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 pull -u origin main --allow-unrelated-histories
git push origin main
Now you're good to go!
Add a Dockerfile to the app from the example in the repo. See below.
touch Dockerfile
<HOW_TO_DOCKERFILE> (see sample app's Dockerfile)
Commit your changes, and push your code from the CLI to the repo.
git add Dockerfile
git commit -m "Add Dockerfile to the app repo."
git push origin main
Installing new caniuse-lite version and clean package.json dependencies from caniuse-lite.
npx browserslist@latest --update-db
Build a container image w Docker.
docker build . --tag appid-openshift
Run the image w Docker Desktop.
docker run appid-openshift
View the app.
docker run appid-openshift
Tag the docker image.
docker tag appid-openshift <DOCKERHUB_REPO>/appid-openshift:latest
Push the image to Docker Hub.
docker push <DOCKERHUB_REPO>/appid-openshift:latest
Copy the image location from the output.
The push refers to repository [docker.io/<DOCKERHUB_REPO>/appid-openshift]
Login to your IBM Cloud account.
ibmcloud login
View available resource groups.
ibmcloud resource groups
Assign a target resource group.
ibmcloud target -g Default
Update the Region to eu-gb.
ibmcloud target -r eu-gb
Create a new Code Engine project and give it a name.
ibmcloud ce project create --name <NAME>
ibmcloud ce project create --name ufhacks
Verify you're in the newly created project.
ibmcloud ce project current
OPTIONAL: View your list of CE projects.
ibmcloud ce project list
OPTIONAL: Select the CE project you want to use.
ibmcloud ce project --name <NAME>
ibmcloud ce project --name ufhacks
Create a new Code Engine application and give it a name.
WE WILL DO THIS FROM THE UI
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
Get the app URL.
ibmcloud ce application get -n ibm-react-app -output url
Update the package.json react-dotenv.whitelist property URL to the Code Engine app URL.
"react-dotenv": {
"whitelist": ["<OUTPUT_URL>"]
}
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>
View your serverless app deployed to Code Engine!
<OUTPUT_URL>
Login to your app with Facebook OAuth, Google OAuth, and IBM Cloud Directory!
<TEST_IT_OUT!>
Create a new CE secret reference.
ibmcloud ce app update --name ibm-react-app --env-from-secret secrets