React + Docker with Security

shape
shape
shape
shape
shape
shape
shape
shape

Most cloud providers offer a way to deploy a static site. A built React app is just JavaScript, HTML, and CSS. They’re static files that can live on pretty much any web server. In fact, with JSX (HTML in JS) and Styled Components, you could even say it’s just JavaScript!

Docker is the de facto standard to build and share containerized applications. You can use it to package your apps and include many open source web servers to serve up your app. As an added bonus, you can configure the webserver to send security headers that make your app more secure.

Table of Contents

  • Create a React App
  • Why Docker?
  • Create a Dockerfile and Nginx Configuration
  • Build a Docker Image with Your React App
  • Run Your Docker + React App
  • Deploy Your React App to Heroku
  • Deploy Your Docker + React App to Heroku
  • Use Cloud Native Buildpacks to Create Your React + Docker Image
  • Deploy Your React + Docker Image to Docker Hub
  • Deploy Your React + Docker Image to Heroku
  • Learn More About React and Docker

Create a React App

git clone 
cd docker
npm install

This is a React app that uses Styled Components for its CSS and is secured by OpenID Connect (aka OIDC). You can read about how it was created in Build a React App with Styled Components.

Log into your Okta developer account (you created one, right?) to register this app and enable OIDC authentication.

  1. Go to Applications in the top menu
  2. Select Add Application > SinglePage App and click Next
  3. On the settings screen, give your app a name like Docker
  4. Make sure the ports are set to 8080 and the Login redirect URI is http://localhost:8080/callback
  5. Click Done

The resulting screen will provide you with a client ID.

Copy and paste the client ID into your application’s src/App.js. The value for <yourIssuerURI> can be found in your Okta dashboard, under API > Authorization Servers. For example, mine is https://dev-717481.okta.com/oauth2/default.

The \_<>__ brackets are just placeholders, so make sure to remove them_!

Start your app with npm start. You’ll be redirected to Okta to authenticate, then back to your app. If you’re not redirected, it’s because you’re already logged in. Try again in a private window to see the login process.

You’ll see a simple, clean calendar, with today’s date selected.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: