Using Docker To Build A Frontend Setup

Here's a few parts for a "frontend"

• Nginx: an nginx server that serves static assets (html, js, css, etc)

• React: the single-page-app library (here, using great old "create-react-app" for ease of implementation)

• Docker: put it all together

• Using Docker To Build A Frontend Setup

  • Assuming A Fontend Setup
    • The Directory Structure
    • The Relevant NPM Commands

Assuming A Fontend Setup

The Directory Structure

A directory that holds the "guts" to build a frontend with react might contain files like...

.gitignore
package.json
package-lock.json
README.md
tsconfig.json
src/
  index.tsx
  index.scss
  App/
    index.tsx
    index.scss
    app.test.tsx
  Components/
    # ...more here...
  Layouts
    # ...more here...
public # or dist... a directory that holds the built contents after something like "npm run build"

The Relevant NPM Commands

In the package.json let's assume a command is present:

• "build": "react-scripts build" which will create the static assets

The Dockerfile

# STAGE: building container
# prep & do OS work
FROM node:latest as buildstage
# will store built content in build dir
WORKDIR /build-dir

# prep & do npm work
COPY . .
RUN npm ci
RUN npm run build

# STAGE: runtime container
# prep & do os work
FROM nginx:alpine

# prep & do dir, stage, owner, and running process work
COPY --from=buildstage /build-dir/build /usr/share/nginx/html

• uses a node image for the work of compiling and building the react project
• uses an nginx image to serve the frontend content in a webserver
• the nginx server serves content from the "internal" path of /usr/share/nginx/html