DOCSEARCHbyAlgolia
Submit Docs

roadhog

repository·master·Indexed 25 days ago

https://github.com/sorrycc/roadhog

A configurable CLI tool for React application development, providing a streamlined experience similar to create-react-app with added flexibility via JSON/JS webpack configurations. It includes commands for development, building, and testing, and supports API mocking via .roadhogrc.mock.js or a dedicated mock directory.

Tokens
1.7K
Snippets
3
Records
16
Agent score
33%

What's inside roadhog

  1. Configure API mocks with .roadhogrc.mock.js

    master

    When running roadhog dev, you can define mock APIs in a .roadhogrc.mock.js file. The API follows the Express@4 pattern.

    Supported formats:

    • Object/Array: Map a path to a static response.
    • Custom Functions: Use a function (req, res) => { ... } for dynamic logic.
    • Path shorthand: You can omit the HTTP method (e.g., GET or POST).
    export default {
  // Support type as Object and Array
  'GET /api/users': { users: [1,2] },

  // Method like GET or POST can be omitted
  '/api/users/1': { id: 1 },

  // Support for custom functions, the API is the same as express@4
  'POST /api/users/create': (req, res) => { res.end('OK'); },
};

  2. Install and use roadhog CLI

    master

    Roadhog is a CLI tool for React application development providing dev, build, and test commands. It is based on react-dev-utils and offers a configurable experience similar to create-react-app.

    To install roadhog globally:

    npm i roadhog -g

    Common commands:

    • roadhog dev: Start local development server.
    • roadhog build: Build the project for production.
    • roadhog test: Run tests (based on Jest and Enzyme).
    • roadhog -v: Check the installed version.
    # Install globally
$ npm i roadhog -g

# Local development
$ roadhog dev

# Build
$ roadhog build

# Test
$ roadhog test

  3. Configure webpack via .webpackrc

    master

    Roadhog uses af-webpack for its configuration. You can customize the webpack behavior by creating a .webpackrc (JSON format) or a .webpackrc.js (ES6 module format) in your project root.

    JSON format (.webpackrc):

    {
  "externals": { "react": "window.React" }
}

    JS format (.webpackrc.js):

    export default {
  externals: { react: 'window.React' },
}

  4. Use the mock directory for API mocks

    master
    In addition to the .roadhogrc.mock.js configuration file, Roadhog watches the ./mock/ directory for changes. Files placed in this directory are used to define mock behaviors, and the development server will automatically reload these mocks when they change.

  5. Configure Mock APIs with .roadhogrc.mock.js

    master

    Roadhog supports mocking APIs by creating a .roadhogrc.mock.js file in your project root. This file allows you to define both mock responses and proxy rules.

    Mocking Responses

    To mock a response, use the format METHOD /path as the key. The value can be a function, an object, or a string.

    • If the value is a function, it is called with the request arguments.
    • If the value is an object or string, the server will return it as a JSON response.

    Proxying Requests

    To proxy requests to a different server, use the format METHOD /path where the path contains a regex pattern (e.g., /api/(.*)), and the value is the target URL string.

    Example Configuration

    module.exports = {
  // Mocking a GET request with a JSON object
  'get /api/user': { id: 1, name: 'John Doe' },

  // Mocking a POST request with a function
  'post /api/login': (req, res) => {
    res.json({ token: 'abc-123' });
  },

  // Proxying requests matching a pattern to a target server
  'get /api/(.*)': 'http://localhost:3000/api/$1',
};

  6. Configure environment variables for roadhog

    master

    You can use environment variables to customize the behavior of the roadhog CLI:

    VariableDefaultDescription
    PORT8000The port for the dev server
    HOSTlocalhostThe host for the dev server
    ANALYZEN/AWhether to analyze the output bundle during roadhog build
    ESLINTN/ASet to none to disable eslint check
    TSLINTN/ASet to none to disable tslint check
    COMPRESSN/ASet to none to disable file compressing in roadhog build
    BROWSERN/ASet to none to disable browser open in roadhog dev

    Example: Start the dev server on port 3000:

    # OS X, Linux
$ PORT=3000 roadhog dev

# Windows (cmd.exe)
$ set PORT=3000&&roadhog dev

# Using cross-env (recommended for cross-platform)
$ cross-env PORT=3000 roadhog dev

  7. Debug mock configuration errors

    master

    If your .roadhogrc.mock.js file contains syntax errors or invalid configurations, Roadhog will catch the error and display a formatted error message in the console. The error output includes:

    • A red Failed to parse mock config. warning.
    • The relative file path where the error occurred.
    • A cleaned-up stack trace showing the specific line and error details.

  9. Configure webpack entries with glob patterns

    master

    Use the entry key to specify webpack entries. It supports glob patterns, which is useful for multi-page applications.

    Example for multi-page projects where entries are in src/pages/:

    "entry": "src/pages/*.js"
    "entry": "src/pages/*.js"

  11. Configure webpack DefinePlugin via define

    master

    Use the define key to pass constants to your code via webpack's DefinePlugin. Values are automatically processed with JSON.stringify.

    "define": {
  "process.env.TEST": 1,
  "USE_COMMA": 2
}