Run A React App

We'll now look at an op to run a sample React application. Please see the code at https://github.com/opctl/react-ops-example

We'll stick to simple node.js conventions of including the run command in an npm start script in package.json. Because we used create-react-app to bootstrap our project, the start script is react-scripts start, which will launch the webpack dev server to serve our app for development.

Let's say our frontend React app needs to call the a go api from our previous example. When running that stack we want our services running locally (React app running via webpack, our go service, and the mysql database). We however prefer to have the ops running each service to live with the source code it runs, rather than in a separate place.

What we need our dev op to do then is to:

  1. call go-svc's dev op by remote reference
  2. call react-app's init op by local reference
  3. run our React app in a container

So our ops in react-ops-example would look like this

init

name: init
description: installs dependencies of the project
inputs:
  srcDir:
    dir:
      default: .
      description: project source location
run:
  container:
    image: { ref: 'node:10-alpine'}
    cmd: [npm, install]
    dirs:
      /src: $(srcDir)
    workDir: /src

dev

name: dev
description: runs react-app for development
run:
  parallel:
    - op:
        ref: github.com/opctl/golang-ops-example#1.0.2/.opspec/dev # remotely referencing an op via git
    - serial:
      - op:
          ref: init
      - container:
          image: { ref: 'node:10-alpine'}
          cmd: [npm, run, 'start']
          dirs:
            /src: $(/srcDir)
          workDir: /src
          ports: {
            '3000':'3000'
          }

going to http://localhost:8080 should show us the go-svc api being served, and http://localhost:3000 should show us the react app, which in turns is making a call to go-svc and fetching data to show.

Notice the following:

  1. we're referencing the dev op for go-svc remotely - which has been designed to be self-containing. opctl clones the golang-ops-example repo and runs the op for us
  2. we can run our ops in any combination of parallel and serial blocks, composing them as needed. for our case the dev op can run in the background while we init then run our react app
  3. networking between our services "just works" by referencing containers by name, thanks to how they all are in the same Docker container network, so the webpack dev server proxy configuration in package.json targets go-svc:
"proxy": {
    "/api": {
      "target": "http://go-svc:8080"
    }
  }

results matching ""

    No results matching ""