Codakey
Play
← Back to react-boilerplate/react-boilerplate

How to Deploy & Use react-boilerplate/react-boilerplate

React Boilerplate Deployment and Usage Guide

Prerequisites

  • Node.js: v8.15.1 or higher
  • npm: v5 or higher
  • Git: For cloning the repository
  • Optional: A code editor with ESLint and Prettier extensions for best development experience

Installation

  1. Clone the repository

    git clone --depth=1 https://github.com/react-boilerplate/react-boilerplate.git <YOUR_PROJECT_NAME>

  2. Navigate to the project directory

    cd <YOUR_PROJECT_NAME>

  3. Install dependencies and clean git repository

    npm run setup

  4. Start the development server

    npm start

    The application will be available at http://localhost:3000

  5. Clean example app (optional)

    npm run clean

    This removes the example app and prepares the project for your own code.

Configuration

Environment Variables

The project uses environment variables for configuration. Create a .env file in the root directory:

# Basic configuration
NODE_ENV=development

# Optional: Customize port
PORT=3000

# Optional: API endpoints
API_URL=http://localhost:8080/api

Available Scripts

The project includes several npm scripts for development and build processes:

  • npm start - Starts the development server with hot reloading
  • npm run build - Creates a production build in the build folder
  • npm run start:prod - Runs the production build locally
  • npm test - Runs all tests
  • npm run test:watch - Runs tests in watch mode
  • npm run generate - Runs the generator CLI for creating components, containers, etc.

Build & Run

Development

npm start

Features:

  • Hot module replacement
  • State preservation on hot reload
  • Error overlay
  • Source maps

Production Build

npm run build

The build process includes:

  • Code splitting with dynamic imports
  • Tree shaking
  • Minification
  • Asset optimization
  • Service worker generation for offline support

Running Production Build Locally

npm run start:prod

This serves the production build from the build folder.

Deployment

Static Hosting (Recommended)

React Boilerplate generates a static build that can be deployed to any static hosting service:

  1. Build the application

    npm run build

  2. Deploy to your preferred platform:

Vercel (formerly Zeit)

  • Connect your GitHub repository
  • Select the project
  • Configure build command: npm run build
  • Output directory: build

Netlify

  • Drag and drop the build folder
  • Or connect your repository
  • Build command: npm run build
  • Publish directory: build

GitHub Pages

npm run deploy

(Requires gh-pages package and proper configuration)

Docker Deployment

Create a Dockerfile:

FROM node:14-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t my-app .
docker run -p 80:80 my-app

Custom Server Deployment

For server-side rendering or API integration, deploy to platforms like:

  • Heroku: Push to Heroku Git remote
  • AWS Elastic Beanstalk: Deploy the build folder
  • Digital Ocean App Platform: Connect repository and configure build settings

Troubleshooting

Common Issues and Solutions

1. Port already in use

npm start -- --port 3001

Or set PORT=3001 in your .env file.

2. Module not found errors

rm -rf node_modules
npm install

3. Hot reload not working

  • Check if npm start is running
  • Verify no conflicting processes on port 3000
  • Clear browser cache and reload

4. Build fails

  • Check for syntax errors in your code
  • Run npm test to identify issues
  • Ensure all dependencies are installed correctly

5. Service worker not updating

  • Check the service worker registration in your browser's dev tools
  • Ensure the cache is properly invalidated
  • Verify the offline-plugin configuration

Generator Issues

If the generator CLI doesn't work:

npm install -g plop
plop

ESLint/Prettier Issues

Ensure your editor has the appropriate extensions installed:

  • ESLint extension for automatic linting
  • Prettier extension for code formatting

Performance Issues

If the app is slow:

  • Check bundle size with npm run analyze
  • Optimize images and assets
  • Implement code splitting for large components

Testing Issues

If tests fail:

  • Run npm test -- --verbose for detailed output
  • Check test files for syntax errors
  • Ensure test environment is properly configured

Additional Resources

← Project overviewView alternatives to react-boilerplate/react-boilerplate →