Single Page Apps on OpenShift Using Chained Builds

From DevConf.CZ 2019
When you’re developing single page apps using frameworks like React or Vue, there’s typically a build step involved. This build step can include multiple tasks like transpilation, minification, etc. and produces static HTML, JavaScript, and CSS as output. These build processes require Node.js to run. For production deployment, however, these apps will typically use NGINX or Apache HTTP server to serve those static files.

In this short workshop, you’ll learn how chained builds and the source-to-image web app builder make it easy to build and deploy your single page web apps on OpenShift. Bring your laptop!

Transcript

1. @jankleinert Single Page Apps on OpenShift Using Chained Builds
2. @jankleinert Hello! Jan Kleinert @jankleinert
3. @jankleinert What do we mean by Single Page Apps? A web app where content gets re-rendered in response to an action taken by a user, without making an HTTP request to the server.
4. @jankleinert Create React App https://facebook.github.io/create-react-app/ npx create-react-app my-app
5. @jankleinert Source to Image (s2i) https://github.com/openshift/source-to-image s2i: a tool for building reproducible container images your source + builder image = new image two scripts: assemble and run
6. @jankleinert centos7-s2i-web-app Assemble Script https://github.com/nodeshift/centos7-s2i-web-app/blob/master/s2i/as semble yarn install and yarn build or npm install and npm run build
7. @jankleinert centos7-s2i-web-app Run Script https://github.com/nodeshift/centos7-s2i-web-app/blob/master/s2i/ru n if [ ! -z "$NPM_RUN" ]; then $NPM_RUN else npx serve -s /opt/app-root/output -l $DEPLOY_PORT fi
8. @jankleinert Templates https://docs.openshift.com/container-platform/3.11/dev_guide/templates.html “A template describes a set of objects that can be parameterized and processed to produce a list of objects for creation by OpenShift Container Platform. A template can be processed to create anything you have permission to create within a project, for example services, build configurations, and deployment configurations.”
9. @jankleinert Workshop Time! Claim a username (write your name next to an open username): http://bit.ly/devconfcz-usernames Workshop guide: http://bit.ly/devconfcz-workshop