npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

docker-cra

v0.1.4

Published

npm cli utility to assist serving create-react-app projects out of a docker container

Downloads

26

Readme

Motivation

This project was driven by two main goals:

  1. An easy way to serve create-react-app applications out of docker containers.
  2. A way to re-use the same artifact between test and production environments.

And a bonus goal (under development):

  1. A way to support old chunks for CRA versions still out in the wild.

Features

  • Inject environment variables at container runtime
  • Lightweight nginx serving implementation

Usage

Requirements

  • Node 14 or later

Example

For a working example see the docker-cra-example repository.

Schema

A joi schema is required to validate incoming environment variables. This serves two purposes:

  1. As window.env.js is public, the schema ensures nothing sensitive ends up in the file.
  2. As we have no validation of env variable types at compile type, we need to ensure they are provided and correctly typed at runtime.

A file called env.schema.js should be created in the root of the project with all required environment variables defined. In additional to those defined, docker-cra automatically supports the following environment variables:

  • REACT_APP_CLIENT_VERSION (required string)
  • PUBLIC_URL (serve path - or leave blank to serve at /)

Base Docker Image

A base docker image providing a lightweight nginx server with the docker-cra cli included can be found at dockerhub repository docker-cra.

This is the recommended way of deploying your docker-cra-enabled application into a docker container.

An example of dockerfile usage:

FROM demery/docker-cra:v0.1.1

COPY env.schema.js ./env.schema.js
COPY build /usr/share/nginx/html

It's recommended to match the version of docker-cra npm version with the docker-cra docker tag version to ensure local development more closely mirrors docker deploys.

To Do

  • Support version bumping the app and supporting old chunks that client's might not have loaded

Local Development

Building and testing locally is best done along with the companion repo docker-cra-example.

In this repo you can run the following commands to make the local build available to the example project.

npm run build && npm link
docker build -t docker-cra:latest .

And then in the example run the following to consume and test.

# Install dependencies
npm ci
npm link docker-cra

# Local dev test
npm start