HuyAms

@HuyAms·3 public vizzes

Gist fa674a3db25bd721df50e36efa7736b3

This example demonstrates a Dockerized React application configured for development, testing, and production deployment using Dockerfiles and docker-compose. The development setup mounts source code as a volume, enables live reload, and runs tests via a separate service, while the production build uses a multi-stage Dockerfile that compiles the app with `npm run build` and serves static files through Nginx. Travis CI automates the pipeline, building the Docker image, running tests with `npm run test -- --coverage`, and deploying to AWS Elastic Beanstalk. The code leverages React’s development server and Node’s Alpine image for a lightweight containerized workflow, though no external data-viz libraries appear in this configuration.

Oct 17, 2019

Loading thumbnail…

Docker nodejs

This example visualizes the build process of a Dockerized Node.js application, using a textual flowchart style. The code defines a Dockerfile that starts from the `node:alpine` base image, sets a working directory, copies `package.json`, runs `npm install`, and copies the rest of the source code before launching via `npm start`. The visualization highlights the sequence of filesystem and dependency operations, showing how the official Node.js API and npm commands construct the container image layer by layer.

Oct 10, 2019

Loading thumbnail…

Gist 782553a6e275e4bfc694a6a3a6d1a46f

This example demonstrates how the React `useRef` hook preserves a mutable value across re-renders, unlike the `createRef` API, which creates a new ref each render. It visually compares the two by displaying the current render index alongside the persisted value from `useRef` and the reset value from `createRef` after a button click triggers a state update. The code uses `React.useState` to drive re-renders and `React.useRef` to hold a stable reference, while `createRef` shows its transient nature. The example also uses `useEffect` with a custom comparison to illustrate deep object dependency handling, referencing the React documentation.

Sep 10, 2019