-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
Puts Debuggerer
Ruby library for improved puts debugging, automatically displaying bonus useful information such as source line number and source code.
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!
Create a React app below, clone this repo, or use the sample app.
, a login that calls the login function(), and an error . 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//.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 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 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! Enter fullscreen mode Exit fullscreen mode DO NOT SKIP: Add the to package.json Update the package.json react-dotenv.whitelist property URL to the Code Engine app URL. "react-dotenv": { "whitelist": [""] } Enter fullscreen mode Exit fullscreen mode DO NOT SKIP: Add the 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 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! Enter fullscreen mode Exit fullscreen mode NOW YOU'RE READY TO GET OUT THERE AND HACK TOGETHER SOMETHING AMAZING! Connect w Me! https://linktr.ee/jritten