### Initialize Firebase Project

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Guides through the interactive setup process for Firebase projects, including project association, database rules, and hosting configuration.

```sh
    === Project Setup

    First, let's associate this project directory with a Firebase project.
    You can create multiple project aliases by running firebase use --add,
    but for now we'll just set up a default project.

    ? What Firebase project do you want to associate as default? Example app (example-app-fd690)

    === Database Setup

    Firebase Realtime Database Rules allow you to define how your data should be
    structured and when your data can be read from and written to.

    ? What file should be used for Database Rules? database.rules.json
    ✔  Database Rules for example-app-fd690 have been downloaded to database.rules.json.
    Future modifications to database.rules.json will update Database Rules when you run
    firebase deploy.

    === Hosting Setup

    Your public directory is the folder (relative to your project directory) that
    will contain Hosting assets to uploaded with firebase deploy. If you
    have a build process for your assets, use your build's output directory.

    ? What do you want to use as your public directory? build
    ? Configure as a single-page app (rewrite all urls to /index.html)? Yes
    ✔  Wrote build/index.html

    i  Writing configuration info to firebase.json...
    i  Writing project information to .firebaserc...

    ✔  Firebase initialization complete!
```

--------------------------------

### Now CLI Deployment

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Guide for deploying a React app using the Now CLI. This includes installing the tool, building the app, navigating to the build directory, and running the 'now' command.

```sh
npm install -g now
npm run build
cd build
now --name your-project-name
```

--------------------------------

### Installing Enzyme for Shallow Rendering

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Details the installation steps for Enzyme and its React adapter, which is recommended for testing React components in isolation using shallow rendering.

```sh
npm install --save enzyme enzyme-adapter-react-16 react-test-renderer
```

```sh
yarn add enzyme enzyme-adapter-react-16 react-test-renderer
```

--------------------------------

### Complete useCountUp Hook Example

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

A comprehensive example of the `useCountUp` hook, showcasing how to manage the counter's state with methods like start, pauseResume, reset, and update. It also includes various callback props for lifecycle events and demonstrates controlling the animation via buttons.

```javascript
import { useCountUp } from 'react-countup';
import React from 'react';

const CompleteHook = () => {
  const countUpRef = React.useRef(null);
  const { start, pauseResume, reset, update } = useCountUp({
    ref: countUpRef,
    start: 0,
    end: 1234567,
    delay: 1000,
    duration: 5,
    onReset: () => console.log('Resetted!'),
    onUpdate: () => console.log('Updated!'),
    onPauseResume: () => console.log('Paused or resumed!'),
    onStart: ({ pauseResume }) => console.log(pauseResume),
    onEnd: ({ pauseResume }) => console.log(pauseResume),
  });
  return (
    <div>
      <div ref={countUpRef} />
      <button onClick={start}>Start</button>
      <button onClick={reset}>Reset</button>
      <button onClick={pauseResume}>Pause/Resume</button>
      <button onClick={() => update(2000)}>Update to 2000</button>
    </div>
  );
};
```

--------------------------------

### Install React Styleguidist

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the react-styleguidist package as a project dependency using npm or yarn. This package provides a style guide and component development environment.

```shell
npm install --save react-styleguidist
```

```shell
yarn add react-styleguidist
```

--------------------------------

### npm Start Command

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Starts the development server for the React application. It opens the app in the browser and enables hot reloading for instant feedback on code changes.

```APIDOC
npm start
Description: Runs the app in the development mode.
Opens http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
```

--------------------------------

### Install and Use jest-enzyme

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Instructions for installing jest-enzyme and importing its matchers to simplify React component testing with Jest.

```javascript
import 'jest-enzyme';
```

--------------------------------

### Install and Use Serve for Static Deployment

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the 'serve' package globally and uses it to serve a Create React App production build. The command serves the static site on port 5000 by default, which can be customized.

```sh
npm install -g serve
serve -s build
```

--------------------------------

### Surge CLI Deployment

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Instructions for deploying to Surge.sh. Install the Surge CLI, log in, and run the 'surge' command, specifying the 'build' folder as the project path.

```sh
npm install -g surge
surge

# When prompted for project path:
# project path: /path/to/project/build
```

--------------------------------

### Add Styleguidist Scripts to package.json

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Configures npm scripts in your `package.json` file to easily start the Styleguidist development server and build static style guide assets. These scripts facilitate component development and documentation.

```javascript
{
  "scripts": {
    "styleguide": "styleguidist server",
    "styleguide:build": "styleguidist build",
    "start": "react-scripts start"
  }
}
```

--------------------------------

### Start Styleguidist Server

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Executes the Styleguidist server using the configured npm script. This command launches a local development server that displays your components and their documentation.

```shell
npm run styleguide
```

--------------------------------

### Install Storybook CLI Globally

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the Storybook command-line interface globally, enabling the `getstorybook` command for project integration. This is the first step to setting up Storybook in a React application.

```shell
npm install -g @storybook/cli
```

--------------------------------

### Install React Router

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Adds the React Router library to your project for client-side routing. Supports installation via npm or yarn.

```sh
npm install --save react-router-dom
```

```sh
yarn add react-router-dom
```

--------------------------------

### Start React App with HTTPS (Bash/Powershell)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates how to start a React development server with HTTPS enabled using environment variables. This is applicable for both Linux/macOS (Bash) and Windows (Powershell) environments.

```powershell
($env:HTTPS = $true) -and (npm start)
```

```bash
HTTPS=true npm start
```

--------------------------------

### Install Source Map Explorer

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the source-map-explorer package, a tool for analyzing JavaScript bundle sizes, using either npm or yarn.

```sh
npm install --save source-map-explorer
```

```sh
yarn add source-map-explorer
```

--------------------------------

### Install Git Hooks and Formatting Dependencies

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs husky, lint-staged, and prettier using npm or yarn. These tools are used to automate code formatting before Git commits.

```sh
npm install --save husky lint-staged prettier
```

```sh
yarn add husky lint-staged prettier
```

--------------------------------

### Install npm-run-all

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the `npm-run-all` package, a utility for running multiple npm scripts. It's used here to run the CSS watcher and the React development server concurrently.

```sh
npm install --save npm-run-all
```

--------------------------------

### Jest Configuration for Custom Test Setup

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Shows how to configure Jest in `package.json` to use a custom setup file, such as `src/setupTests.js`, for global test configurations.

```json
{
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js"
  }
}
```

--------------------------------

### Configure Enzyme Adapter

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets up the Enzyme testing utility by configuring the adapter for React 16. This is typically done in a setup file executed before tests run.

```javascript
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });
```

--------------------------------

### Install npm-run-all with Yarn

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the `npm-run-all` package using Yarn. This package helps manage and execute multiple npm scripts efficiently.

```sh
yarn add npm-run-all
```

--------------------------------

### Netlify CLI Manual Deploy

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Instructions for manually deploying a React application to Netlify's CDN using the Netlify CLI. This involves installing the CLI and running the deploy command, specifying the build output directory.

```sh
npm install netlify-cli -g
netlify deploy
```

--------------------------------

### Netlify Continuous Delivery Setup

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Steps to configure continuous delivery with Netlify. This involves connecting a Git repository, setting the build command to 'yarn build', and the publish directory to 'build'.

```text
1. Start a new netlify project
2. Pick your Git hosting service and select your repository
3. Set `yarn build` as the build command and `build` as the publish directory
4. Click `Deploy site`
```

--------------------------------

### Manually Start CountUp with Render Prop

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

A basic example of using the CountUp component with a render prop, allowing a button click to initiate the counting animation from 0 to 100.

```javascript
<CountUp start={0} end={100}>
  {({ countUpRef, start }) => (
    <div>
      <span ref={countUpRef} />
      <button onClick={start}>Start</button>
    </div>
  )}
</CountUp>
```

--------------------------------

### Install node-sass-chokidar with Yarn

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the `node-sass-chokidar` package using Yarn. This is an alternative to npm for managing project dependencies and running scripts.

```sh
yarn add node-sass-chokidar
```

--------------------------------

### Enable HTTPS in Development (Windows CMD)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Command to start the development server with HTTPS enabled on Windows Command Prompt. This involves setting the HTTPS environment variable before running the start script.

```cmd
set HTTPS=true&&npm start
```

--------------------------------

### Install React Bootstrap and Bootstrap CSS

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Instructions for installing React Bootstrap and Bootstrap CSS using npm or yarn. This is a prerequisite for integrating Bootstrap styling and components into a React application.

```sh
npm install --save react-bootstrap bootstrap@3
```

```sh
yarn add react-bootstrap bootstrap@3
```

--------------------------------

### Install Dependencies with npm and Yarn

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Shows how to install project dependencies using the npm and yarn package managers. This is a fundamental step for adding new libraries or frameworks to your React application.

```sh
npm install --save react-router
```

```sh
yarn add react-router
```

--------------------------------

### Web App Manifest Guide Reference

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Provides context on the fields within the web app manifest and how customizations affect the user experience when the web app is added to a homescreen.

```APIDOC
Web App Manifest Guide:
  - https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
  - Defines application metadata like icons, names, and theme colors.
  - Affects how the web app is displayed on homescreens (e.g., Android).
```

--------------------------------

### Travis CI Configuration Example

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

A basic .travis.yml file for a Node.js project, specifying the Node.js version, caching node_modules, and running build and test scripts.

```yaml
language: node_js
node_js:
  - 6
cache:
  directories:
    - node_modules
script:
  - npm run build
  - npm test
```

--------------------------------

### Simple useCountUp Hook Example

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

Illustrates the basic usage of the `useCountUp` hook. It attaches the counter to an element with a specific ID and starts the animation to a target value.

```javascript
import { useCountUp } from 'react-countup';

const SimpleHook = () => {
  useCountUp({ ref: 'counter', end: 1234567 });
  return <span id="counter" />;
};
```

--------------------------------

### Component Smoke Test Example

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Provides an example of a basic 'smoke test' for a React component, ensuring it renders without crashing. This involves rendering the component into a DOM element.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
});
```

--------------------------------

### Install gh-pages Package

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the `gh-pages` package as a development dependency for deploying static sites to GitHub Pages. This command can be used with either npm or yarn.

```sh
npm install --save gh-pages
```

```sh
yarn add gh-pages
```

--------------------------------

### Install React CountUp with Yarn

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

Shows how to add the react-countup package to your project using the Yarn package manager.

```bash
yarn add react-countup
```

--------------------------------

### Delay Start CountUp Component

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

An example demonstrating how to set a delay before the CountUp animation begins. The counter will wait for the specified duration (in seconds) before starting its count from 0 to 100.

```javascript
<CountUp delay={2} end={100} />
```

--------------------------------

### Integrate CSS preprocessor with npm start/build

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Updates `package.json` scripts to integrate Sass compilation into the `start` and `build` processes. It uses `npm-run-all` to run the CSS watcher and the React development server in parallel for `start`, and runs CSS build before the React build for `build`.

```diff
   "scripts": {
     "build-css": "node-sass-chokidar src/ -o src/",
     "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   }
```

--------------------------------

### Sass import examples

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates how to import Sass files, including shared variables and modules from `node_modules`, using the configured include paths.

```scss
@import 'styles/_colors.scss'; // assuming a styles directory under src/
@import 'nprogress/nprogress';
```

--------------------------------

### CSS Autoprefixing Example

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Illustrates the transformation of CSS properties with vendor prefixes automatically added by Autoprefixer, a common post-processing step for browser compatibility.

```CSS
.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}
```

```CSS
.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
```

--------------------------------

### Mock Browser API (localStorage)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Example of mocking browser APIs like localStorage in `src/setupTests.js` for testing purposes. This ensures tests can run in environments without a full browser.

```javascript
const localStorageMock = {
  getItem: jest.fn(),
  setItem: jest.fn(),
  clear: jest.fn(),
};
global.localStorage = localStorageMock;
```

--------------------------------

### Example Fetch Request with Proxy

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

When a 'proxy' is configured in package.json, requests like this to '/api/todos' will be automatically forwarded to the proxy server (e.g., http://localhost:4000/api/todos) by the development server.

```javascript
fetch('/api/todos')
```

--------------------------------

### Install node-sass-chokidar

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Installs the `node-sass-chokidar` package, a reliable Sass compiler for Node.js, as a project dependency. This package addresses performance and file detection issues found in the standard `node-sass` watcher.

```sh
npm install --save node-sass-chokidar
```

--------------------------------

### Jest Coverage Configuration Example

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates how to override default Jest coverage settings in a package.json file, including collectCoverageFrom, coverageReporters, coverageThreshold, and snapshotSerializers.

```json
{
  "name": "your-package",
  "jest": {
    "collectCoverageFrom": [
      "src/**/*.{js,jsx}",
      "!<rootDir>/node_modules/",
      "!<rootDir>/path/to/dir/"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 90,
        "functions": 90,
        "lines": 90,
        "statements": 90
      }
    },
    "coverageReporters": ["text"],
    "snapshotSerializers": ["my-serializer-module"]
  }
}
```

--------------------------------

### Configure Multiple Proxies in package.json

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Illustrates how to configure multiple proxy rules in package.json using regular expressions for path matching. This includes examples for different path rewriting and SSL configurations.

```json
{
  // ...
  "proxy": {
    // Matches any request starting with /api
    "/api": {
      "target": "<url_1>",
      "ws": true
      // ...
    },
    // Matches any request starting with /foo
    "/foo": {
      "target": "<url_2>",
      "ssl": true,
      "pathRewrite": {
        "^/foo": "/foo/beta"
      }
      // ...
    },
    // Matches /bar/abc.html but not /bar/sub/def.html
    "/bar/[^/]*[.]html": {
      "target": "<url_3>"
      // ...
    },
    // Matches /baz/abc.html and /baz/sub/def.html
    "/baz/.*/.*[.]html": {
      "target": "<url_4>"
      // ...
    }
  }
  // ...
}
```

--------------------------------

### Install jest-enzyme via npm or yarn

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Commands to add jest-enzyme as a development dependency to your React project using either npm or yarn.

```bash
npm install --save jest-enzyme
```

```bash
yarn add jest-enzyme
```

--------------------------------

### Render Prop Example with CountUp Component

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

Demonstrates using the CountUp component with a render prop to manually trigger the animation. It includes various props for customization like start/end values, duration, separators, prefixes, suffixes, and callbacks for start/end events.

```javascript
<CountUp
  start={-875.039}
  end={160527.012}
  duration={2.75}
  separator=" "
  decimals={4}
  decimal=","
  prefix="EUR "
  suffix=" left"
  onEnd={() => console.log('Ended! 👏')}
  onStart={() => console.log('Started! 💨')}
>
  {({ countUpRef, start }) => (
    <div>
      <span ref={countUpRef} />
      <button onClick={start}>Start</button>
    </div>
  )}
</CountUp>
```

--------------------------------

### Environment Variable Build Output Example

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Illustrates the rendered HTML output of a React component after custom environment variables (like REACT_APP_SECRET_CODE) and NODE_ENV have been embedded during the build process.

```html
<div>
  <small>You are running this application in <b>development</b> mode.</small>
  <form>
    <input type="hidden" value="abcdef" />
  </form>
</div>
```

--------------------------------

### Basic CountUp Usage

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

A simple example of using the CountUp component to animate a number from 0 to 100 on render.

```js
<CountUp end={100} />
```

--------------------------------

### Set Temporary Environment Variables in Shell

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Provides commands for temporarily setting environment variables for the current shell session across different operating systems before starting the development server. These variables are prefixed with REACT_APP_.

```cmd
set "REACT_APP_SECRET_CODE=abcdef" && npm start
```

```powershell
($env:REACT_APP_SECRET_CODE = "abcdef") -and (npm start)
```

```bash
REACT_APP_SECRET_CODE=abcdef npm start
```

--------------------------------

### Configure Proxy in package.json (Single)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Defines a single proxy configuration within the package.json file for routing API requests. This setup allows specifying a target URL and WebSocket support for a given path.

```json
{
  // ...
  "proxy": {
    "/api": {
      "target": "<url>",
      "ws": true
      // ...
    }
  }
  // ...
}
```

--------------------------------

### Serve Command Help

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Displays the help information for the 'serve' command, listing all available options for configuring the static server.

```sh
serve -h
```

--------------------------------

### Autostart CountUp with Render Prop

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

Shows how to configure the CountUp component with a render prop to automatically start the animation on the first render by setting `delay={0}`. The counter will display its initial value and begin counting immediately.

```javascript
<CountUp start={0} end={100} delay={0}>
  {({ countUpRef }) => (
    <div>
      <span ref={countUpRef} />
    </div>
  )}
</CountUp>
```

--------------------------------

### Add Flow Type Checker to Create React App

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Steps to integrate Flow, a static type checker, into a Create React App project. This involves installing `flow-bin`, configuring scripts, initializing Flow, and marking files for type checking.

```bash
npm install --save flow-bin
# or
yarn add flow-bin
```

```bash
Add to package.json scripts:
"flow": "flow"
```

```bash
npm run flow init
# or
yarn flow init
```

```bash
Add to files to be type checked:
// @flow
```

```bash
Run type checking:
npm run flow
# or
yarn flow
```

--------------------------------

### Run Jest Tests with Debugger Attached

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Executes the `test:debug` script defined in `package.json`. This command starts Jest tests but pauses execution, allowing a debugger to attach to the Node.js process.

```bash
$ npm run test:debug
```

--------------------------------

### Enable Scroll Spy with useCountUp Hook

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

Shows how to use the `enableScrollSpy` and `scrollSpyDelay` props with the `useCountUp` hook to automatically start the animation when the element scrolls into view.

```jsx
import './styles.css';
import CountUp, { useCountUp } from 'react-countup';

export default function App() {
  useCountUp({
    ref: 'counter',
    end: 1234567,
    enableScrollSpy: true,
    scrollSpyDelay: 1000,
  });

  return (
    <div className="App">
      <div className="content" />
      <CountUp end={100} enableScrollSpy />
      <br />
      <span id="counter" />
    </div>
  );
}
```

--------------------------------

### react-countup Hook API

Source: https://github.com/glennreyes/react-countup/blob/master/README.md

Provides methods to control the count-up animation, such as starting, pausing, resetting, and updating the end value. These methods are typically accessed via the useCountUp hook.

```APIDOC
countUpRef: () => void
  Ref to hook the countUp instance to

pauseResume: () => void
  Pauses or resumes the transition

reset: () => void
  Resets to initial value

start: () => void
  Starts or restarts the transition

update: (newEnd: number?) => void
  Updates transition to the new end value (if given)
```

--------------------------------

### Initialize Storybook in Project

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Runs the Storybook CLI within your project directory to set up Storybook configuration files and dependencies. Follow the on-screen prompts for integration.

```shell
getstorybook
```

--------------------------------

### Service Worker Navigation Fallback Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Details configuration options for `SWPrecachePlugin` within a Webpack setup to manage service worker navigation routing. These options control how the service worker handles navigation requests, such as serving a cached `index.html` for unknown paths.

```APIDOC
SWPrecachePlugin Configuration:
  navigateFallback: string
    - The URL to fall back to for navigation requests. Typically 'index.html'.
  navigateFallbackWhitelist: array | regexp
    - A whitelist of paths that should trigger the navigateFallback. If not provided, all navigation requests will fall back.
```

--------------------------------

### Import Image in CSS with Webpack

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Shows how Webpack handles image imports within CSS files. Webpack identifies relative paths (starting with `./`) in CSS and replaces them with the correct compiled bundle paths. This ensures background images are correctly linked and benefit from Webpack's asset management features like content hashing.

```css
.Logo {
  background-image: url(./logo.png);
}
```

--------------------------------

### Programmatic Deployment with Node.js and Express

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates how to serve a Create React App build directory using Node.js and the Express framework. It sets up static file serving for the 'build' folder and handles root requests by serving the index.html file.

```javascript
const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(9000);
```

--------------------------------

### Deploy React App to Firebase Hosting

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates the command and output for deploying a built React application to Firebase Hosting.

```sh
    === Deploying to 'example-app-fd690'...

    i  deploying database, hosting
    ✔  database: rules ready to deploy.
    i  hosting: preparing build directory for upload...
    Uploading: [==============================          ] 75%✔  hosting: build folder uploaded successfully
    ✔  hosting: 8 files uploaded successfully
    i  starting release process (may take several minutes)...

    ✔  Deploy complete!

    Project Console: https://console.firebase.google.com/project/example-app-fd690/overview
    Hosting URL: https://example-app-fd690.firebaseapp.com
```

--------------------------------

### npm Run Build Command

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Bundles the React application for production, optimizing it for performance by minifying code and adding content hashes to filenames.

```APIDOC
npm run build
Description: Builds the app for production to the `build` folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about [deployment](#deployment) for more information.
```

--------------------------------

### Project Folder Structure

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Illustrates the standard file and directory layout for a new React project created with tools like Create React App. Key files like index.html and index.js are highlighted as essential.

```text
my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
```

--------------------------------

### Execute Deployment

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Runs the deployment process for your React application to GitHub Pages using the configured `npm run deploy` script.

```sh
npm run deploy
```

--------------------------------

### Build and Serve for Local Testing

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Instructions for building the React application for production and serving it locally to test the offline-first service worker. This process helps avoid caching issues during local development.

```bash
npm run build
# Then run a simple http server from your build directory
```

--------------------------------

### Configure package.json Scripts for Deployment

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Adds `predeploy` and `deploy` scripts to your `package.json` file. `predeploy` ensures the project is built before deployment, and `deploy` executes the `gh-pages` command to publish the build output.

```json
{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}
```

--------------------------------

### Running Jest Tests and Watch Mode

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Explains how to run Jest tests using npm and describes Jest's interactive watch mode, which re-runs tests automatically upon file saves.

```sh
npm test
```

--------------------------------

### Configure `start_url` in `manifest.json`

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets the `start_url` in `manifest.json` to `.` to ensure correct app serving from the root path for homescreen shortcuts. This is crucial for client-side routers that expect the app to be served from the root directory.

```json
{
  "start_url": "."
}
```

--------------------------------

### npm build command

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

The 'npm run build' command is used to create a production-ready build of the React application. Issues can arise if third-party dependencies do not adhere to ES5 compilation standards, leading to minification failures.

```bash
npm run build
```

--------------------------------

### Netlify Client-Side Routing Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

To support client-side routing (e.g., React Router's pushState), create a `public/_redirects` file with specific rewrite rules to direct all requests to the index.html file.

```text
/*  /index.html  200

```

--------------------------------

### Web App Manifest Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

The web app manifest file located at public/manifest.json contains metadata for Progressive Web Apps, controlling icons, names, and branding colors when added to a homescreen.

```json
public/manifest.json
```

--------------------------------

### Configure package.json for Pre-commit Hooks

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Adds a 'precommit' script to package.json to run lint-staged, and configures 'lint-staged' to format staged JavaScript, JSX, JSON, and CSS files using Prettier.

```diff
  "scripts": {
+   "precommit": "lint-staged",
    "start": "react-scripts start",
    "build": "react-scripts build",

```

```diff
  "dependencies": {
    // ...
  },
+ "lint-staged": {
+   "src/**/*.{js,jsx,json,css}": [
+     "prettier --single-quote --write",
+     "git add"
+   ]
+ },
  "scripts": {

```

--------------------------------

### Manual Project Formatting

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Command to manually format all files in the 'src' directory using Prettier with single quotes.

```sh
./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx,json,css}"
```

--------------------------------

### Setting CI Environment Variable for Builds (Windows cmd.exe)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets the CI environment variable to true and runs npm run build on Windows command prompt. This forces the build process to perform a linter warning check.

```cmd
set CI=true&&npm run build
```

--------------------------------

### Configure package.json for User Page Deployment

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Modifies the `deploy` script in `package.json` to specify the branch (`-b master`) when deploying to a GitHub user page, ensuring the site is served correctly from the master branch.

```json
{
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -b master -d build"
  }
}
```

--------------------------------

### Configure WebSocket Proxy in package.json

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets up a proxy specifically for WebSocket connections. This configuration requires setting the 'ws' option to true and targeting a compatible WebSocket server.

```json
{
  // ...
  "proxy": {
    "/socket": {
      // Your compatible WebSocket server
      "target": "ws://<socket_url>",
      // Tell http-proxy-middleware that this is a WebSocket proxy.
      // Also allows you to proxy WebSocket requests without an additional HTTP request
      // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade
      "ws": true
      // ...
    }
  }
  // ...
}
```

--------------------------------

### Writing Basic Jest Tests

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates how to write simple unit tests using Jest's `it()` or `test()` blocks and the `expect()` global function for assertions. It covers importing modules and making assertions on function outputs.

```javascript
import sum from './sum';

it('sums numbers', () => {
  expect(sum(1, 2)).toEqual(3);
  expect(sum(2, 2)).toEqual(4);
});
```

--------------------------------

### Surge Client-Side Routing Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

For applications using HTML5 pushState, rename index.html in the build folder to 200.html before deploying to Surge. This ensures all routes fall back to the main index file.

```text
Rename `build/index.html` to `build/200.html`
```

--------------------------------

### Troubleshoot Deployment Authentication Error

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Resolves the '/dev/tty: No such device or address' error during deployment by creating a Personal Access Token and updating the Git remote URL with the token for authentication.

```sh
# 1. Create a new Personal Access Token on GitHub
# 2. Update the Git remote URL:
git remote set-url origin https://<user>:<token>@github.com/<user>/<repo>
# 3. Retry deployment:
npm run deploy
```

--------------------------------

### Add Analyze Script to package.json

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Adds a custom script to the package.json file to run source-map-explorer against the production build output.

```diff
   "scripts": {
+    "analyze": "source-map-explorer build/static/js/main.*",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",

```

--------------------------------

### Configure `homepage` in `package.json` for Specific Path

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Specifies the `homepage` in `package.json` to a specific URL or path, allowing Create React App to correctly infer the root path for generated HTML files and assets.

```json
{
  "homepage": "http://mywebsite.com/relativepath"
}
```

--------------------------------

### Code Splitting with Dynamic Import()

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates code splitting using dynamic `import()` syntax in React. This technique allows loading code chunks on demand, improving initial load times by splitting your application into smaller, manageable pieces.

```js
const moduleA = 'Hello';

export { moduleA };
```

```js
import React, { Component } from 'react';

class App extends Component {
  handleClick = () => {
    import('./moduleA')
      .then(({ moduleA }) => {
        // Use moduleA
      })
      .catch((err) => {
        // Handle failure
      });
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>Load</button>
      </div>
    );
  }
}

export default App;
```

--------------------------------

### Define Permanent Environment Variables with .env

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Explains how to create a .env file in the project root to define permanent environment variables, which must be prefixed with REACT_APP_. Changes require restarting the development server.

```dotenv
REACT_APP_SECRET_CODE=abcdef
```

--------------------------------

### Environment Variables for react-countup Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

This section details environment variables that can be set to customize the behavior of the react-countup development server and build process. These variables allow for fine-tuning settings related to browser launching, server host, port, and HTTPS usage.

```APIDOC
Environment Variables for react-countup Configuration:

BROWSER
  - Description: Specifies which browser to open by default. Can be a browser name, a path to an executable, or 'none' to disable auto-opening.
  - Development: Supported
  - Production: Not applicable
  - Usage: Set to 'chrome', 'firefox', 'none', or a custom path.
  - Example: export BROWSER=firefox

HOST
  - Description: Defines the hostname the development server binds to. Defaults to 'localhost'.
  - Development: Supported
  - Production: Not applicable
  - Usage: Set to an IP address or hostname.
  - Example: export HOST=0.0.0.0

PORT
  - Description: Specifies the port the development server listens on. Defaults to 3000 or the next available port.
  - Development: Supported
  - Production: Not applicable
  - Usage: Set to a desired port number.
  - Example: export PORT=8080

HTTPS
  - Description: Enables HTTPS mode for the development server when set to 'true'.
  - Development: Supported
  - Production: Not applicable
  - Usage: Set to 'true' to enable HTTPS.
  - Example: export HTTPS=true
```

--------------------------------

### Configure Apache for Client-Side Routing

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Uses `.htaccess` to redirect all requests to `index.html` if the requested file is not found, supporting client-side routing. This configuration is placed in the public folder and copied to the build directory.

```apache
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
```

--------------------------------

### Dynamic Meta Tags with HTML Placeholders

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Illustrates how to set up HTML templates with placeholders for dynamic meta tags like Open Graph title and description. These placeholders can be replaced on the server to reflect the current URL's content.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>
```

--------------------------------

### Import React Bootstrap Components

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Illustrates how to import specific components from the `react-bootstrap` library into your React component files (e.g., `src/App.js`). This allows you to use pre-built UI elements.

```javascript
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
```

--------------------------------

### Setting CI Environment Variable for Tests (Windows cmd.exe)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets the CI environment variable to true and runs npm test on Windows command prompt. This forces Jest to run tests once instead of in watch mode.

```cmd
set CI=true&&npm test
```

--------------------------------

### Configure GitHub Pages Homepage

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets the `homepage` field in `package.json` to specify the root URL for GitHub Pages deployment, which is crucial for correct routing and asset paths.

```json
  "homepage": "https://myusername.github.io/my-app",
```

```json
  "homepage": "https://myusername.github.io",
```

--------------------------------

### VS Code Debug Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Configuration for Visual Studio Code's Chrome Debugger extension to launch and debug a React application running on http://localhost:3000. It includes source map overrides for webpack.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}
```

--------------------------------

### Configure `homepage` in `package.json` for Relative Paths

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Specifies the `homepage` in `package.json` as `.` to make all asset paths relative to `index.html`. This allows the application to be hosted from different base paths without requiring a rebuild.

```json
{
  "homepage": "."
}
```

--------------------------------

### Jest Test File Naming Conventions

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Outlines the recommended file naming conventions for Jest tests within a Create React App project. These include placing tests in `__tests__` folders or using `.test.js` or `.spec.js` suffixes for test files.

```text
- Files with `.js` suffix in `__tests__` folders.
- Files with `.test.js` suffix.
- Files with `.spec.js` suffix.
```

--------------------------------

### npm Test Command

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Launches the test runner in an interactive watch mode, allowing developers to run tests and see results as code changes.

```APIDOC
npm test
Description: Launches the test runner in the interactive watch mode.
See the section about [running tests](#running-tests) for more information.
```

--------------------------------

### Setting CI Environment Variable for Builds (Windows PowerShell)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets the CI environment variable to true and runs npm run build on Windows PowerShell. This forces the build process to perform a linter warning check.

```powershell
($env:CI = $true) -and (npm run build)
```

--------------------------------

### Test Component Output with Jest Matchers

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates testing the rendered output of a React component using Enzyme's `shallow` and Jest's `toEqual` matcher for assertions.

```javascript
import React from 'react';
import { shallow } from 'enzyme';
import App from './App';

it('renders welcome message', () => {
  const wrapper = shallow(<App />);
  const welcome = <h2>Welcome to React</h2>;
  expect(wrapper.contains(welcome)).toEqual(true);
});
```

--------------------------------

### VS Code Debug Configuration for CRA Tests

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Provides a `launch.json` configuration for Visual Studio Code to debug Create React App (CRA) tests. It specifies the Node.js debugger, the runtime executable, and arguments to run Jest tests in band without caching.

```json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug CRA Tests",
      "type": "node",
      "request": "launch",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/react-scripts",
      "args": [
        "test",
        "--runInBand",
        "--no-cache",
        "--env=jsdom"
      ],
      "cwd": "${workspaceRoot}",
      "protocol": "inspector",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}
```

--------------------------------

### Handle Missing Required Files Error

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

This error occurs when essential files like index.html are missing or ignored during the build process. Ensure the file exists with correct casing and is not excluded by .gitignore.

```text
remote: Could not find a required file.
remote:   Name: `index.html`
remote:   Searched in: /tmp/build_a2875fc163b209225122d68916f1d4df/public
remote:
remote: npm ERR! Linux 3.13.0-105-generic
remote: npm ERR! argv "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/node" "/tmp/build_a2875fc163b209225122d68916f1d4df/.heroku/node/bin/npm" "run" "build"

```

--------------------------------

### Runtime Caching Configuration

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Details on configuring runtime caching for cross-origin requests by ejecting the application and modifying the SWPrecacheWebpackPlugin in webpack.config.prod.js.

```javascript
webpack.config.prod.js
```

--------------------------------

### Reference Environment Variables in HTML

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Demonstrates how to embed environment variables, prefixed with REACT_APP_, directly into the public/index.html file. These variables are injected during the build process.

```html
<title>%REACT_APP_WEBSITE_NAME%</title>
```

--------------------------------

### npm eject command

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

The 'npm run eject' command in Create React App allows full control over the build configuration, scripts, and dependencies. However, it requires manual maintenance of these configurations going forward.

```bash
npm run eject
```

--------------------------------

### Setting CI Environment Variable for Builds (Linux/macOS Bash)

Source: https://github.com/glennreyes/react-countup/blob/master/demo/README.md

Sets the CI environment variable to true and runs npm run build on Linux/macOS Bash. This forces the build process to perform a linter warning check.

```bash
CI=true npm run build
```