Skip to content
React.js code that takes a photo, calls a service to overlay the photo, and displays the results. Part of the Coderland series.
JavaScript HTML CSS Dockerfile
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src
.dockerignore
.gitignore Initial commit Jan 29, 2019
Dockerfile
Jenkinsfile
LICENSE
README.md
package-lock.json
package.json added 10-second timeout to fetch Feb 6, 2019

README.md

Coderland Photo Store

This is a React.js application that is part of an interactive Knative and serverless tutorial called the Compile Driver, a ride at an imaginary theme park called Coderland. This application uses your computer camera to allow you to take a snapshot. The snapshot is then sent to a service that overlays the photo, and the result is sent back to this application and displayed.

To run this demo, you'll need to point it to a service that accepts a JPEG picture as a base64 string in a JSON document and returns a base64 string (for the updated image) in a JSON document.

image-overlay is the service that is used with this application. It is run as a Knative service in OpenShift.

ENVIRONMENT VARIABLES

  • You must set the REACT_APP_OVERLAY_URL environment variable to point to the service that does the image overlay.
  • You must set the REACT_APP_OVERLAY_MESSAGE environment variable. This is the message that appears on the photo, e.g. "Hello from Coderland!"

There are options for running this program:

  1. Run it from the command line
    • npm install
    • REACT_APP_OVERLAY_URL=http://myservice-myproject.mydomain.com REACT_APP_OVERLAY_MESSAGE='Hello from Coderland!' npm start
  2. Run it in a Linux container
    • docker build -t coderland .
    • docker run -p 3000:3000 -e REACT_APP_OVERLAY_URL http://myservice-myprojecct.mydomain.com -e REACT_APP_OVERLAY_MESSAGE 'Hello from Coderland!' coderland
    • Open browser to localhost:3000
  3. Run it in OpenShift

IMPORTANT LINKS

📓 Knative Tutorial Docs

🎁 Knative Tutorial repo

Part 1: Introduction to Serverless with Knative

📄 ARTICLE: Part 1: Introduction to Serverless with Knative

🎬 VIDEO: Part 1: Introduction to Serverless with Knative

🎁 REPO: Image overlay

Part 2: Building a Serverless Service

📄ARTICLE: Part 2: Building a Serverless Service

🎬 VIDEO: Part 2: Building a Serverless Service

🎁 REPO: Photo store

Part 3: Deploying a Serverless Service to Knative

📄ARTICLE: Part 3: Deploying a Serverless Service to Knative

🎬 VIDEO: Part 3: Deploying a Serverless Service to Knative

🎁 REPO: Knative proxy


Coderland 🎢🚀🎡 is a place for learning. Developer Training and Red Hat Software: Red Hat Developer.

You can’t perform that action at this time.