Creating and Running a React Project Locally on macOS with ServBay

What is React?

React is an open-source JavaScript library maintained by Meta (formerly Facebook) and its community, specifically designed for building user interfaces (UI). With its component-based architecture, React enables developers to efficiently create complex and maintainable single-page applications (SPA) or the view layer of large web applications. React’s core strengths lie in its declarative programming style, efficient virtual DOM updating, and its extensive ecosystem.

Key Features and Advantages of React

• Component-Based Development: Breaks down complex UIs into independent, reusable components, enhancing code maintainability and reusability.
• Declarative Views: Simply describe the UI’s state; React automatically updates the DOM to match that state, streamlining UI logic.
• Virtual DOM: Maintains a virtual representation of the DOM in memory and minimizes actual DOM operations by diffing, greatly improving performance.
• One-Way Data Flow: Data flows top-down, making state changes in applications easier to trace and understand.
• JSX: A JavaScript syntax extension that allows writing HTML-like structures within JavaScript, improving code readability.
• Robust Ecosystem: Backed by a vast community and a wealth of third-party libraries (such as React Router, Redux/Zustand/MobX, Material UI, etc.) covering state management, routing, UI components, and more.

With React, developers can build modern, high-performance web applications more quickly and efficiently.

Setting up React Development and Production Environments with ServBay

ServBay is a powerful local web development environment providing a suite of software packages for macOS users, including Node.js. This guide details how to use ServBay's Node.js environment and Websites functionality to create, configure, and run a React project step by step, including setting up a reverse proxy for development and static file serving for production.

Prerequisites

Before getting started, please ensure you have completed the following:

1. Install ServBay: ServBay is installed and running on your macOS system.
2. Install the Node.js Package: Use the ServBay UI or command line to install the Node.js package. See the ServBay Node.js package installation guide for detailed steps. ServBay will automatically manage Node.js versions and environment variables.

Create a React Project

We'll use the modern frontend build tool Vite to quickly scaffold a React project. Vite offers blazing-fast cold starts and instant hot module replacement (HMR), significantly enhancing the developer experience. It has become one of the mainstream choices for new React projects (as a replacement for the traditional create-react-app).

1. Open Terminal and Navigate to the Website Root

   Open your terminal app. ServBay’s default recommended website root is /Applications/ServBay/www. Navigate to this directory:

   cd /Applications/ServBay/www

2. Create a New React Project with Vite

   Run the following command to use the create-vite scaffolding tool to create a new project named servbay-react-demo, selecting the react template:

   npx create-vite servbay-react-demo --template react

   • npx is the npm package executor, allowing you to run CLI tools from the npm registry without global installation. This ensures you’re always using the latest version of create-vite.
   • create-vite is the official project scaffolding tool for Vite.
   • servbay-react-demo is the name of your project folder.
   • --template react specifies the use of the React template for initializing the project structure.

   Follow the on-screen prompts to complete project creation.

3. Enter the Project Directory and Install Dependencies

   Navigate into your newly created project and install the required dependencies with npm:

   cd servbay-react-demo
   npm install

   • You may also use yarn install or pnpm install if you prefer Yarn or pnpm as your package manager.

Optional: Modify the React Project Content

To verify your setup, let’s make a quick change to the homepage.

1. Open the src/App.jsx or src/App.tsx File

   Using your preferred code editor, open the src/App.jsx (JavaScript template) or src/App.tsx (TypeScript template) file inside the project directory.

2. Edit the Content

   Locate the section of code that renders the main content, and modify it to display "Hello ServBay!":

   // ... other imports ...
   import './App.css';
   
   function App() {
     // ... other code ...
     return (
       <>
         {/* ... other elements ... */}
         <h1>Hello ServBay!</h1>
         {/* ... other elements ... */}
       </>
     );
   }
   
   export default App;

   Save the file.

Entering Development Mode

During development, you typically run a local dev server that provides features like hot module replacement (HMR) for rapid feedback. ServBay supports routing external requests to your dev server via reverse proxy.

1. Start the Development Server in Terminal

   In your project root servbay-react-demo, run the following command to start the Vite dev server on a specified port (for example: 8585):

   npm run dev -- --port 8585

   • npm run dev executes the dev script defined in your project’s package.json, which typically starts the Vite dev server.
   • -- --port 8585 forwards the port argument to the Vite command.

   Once the server is running, you’ll see the local access address in the terminal, such as http://localhost:8585. Keep the terminal window open and the server running.

2. Configure a Reverse Proxy in ServBay

   Open the ServBay application and go to the Websites section. Click the add button to create a new website configuration:

   • Name: ServBay React Dev (a descriptive name)
   • Domain: servbay-react-dev.servbay.demo (a demo domain related to ServBay branding)
   • Site Type: Select Reverse Proxy
   • Proxy IP: 127.0.0.1 (the dev server runs locally)
   • Proxy Port: 8585 (matches the port specified for your dev server)

   Save the configuration. ServBay will automatically apply changes and configure the built-in web server (Caddy or Nginx) to forward requests to servbay-react-dev.servbay.demo to http://127.0.0.1:8585.

   For step-by-step instructions on adding websites in ServBay, see the ServBay website management documentation.

3. Access Your Development Site

   Open your browser and visit your configured domain: https://servbay-react-dev.servbay.demo.

   • Thanks to ServBay’s powerful features, your local development site is automatically secured with an SSL certificate (issued by ServBay User CA or ServBay Public CA), so you can access it via HTTPS. For more details on ServBay’s SSL capabilities, check Securing Your Site with SSL.
   • Now, when you modify and save project files in your code editor, the page in your browser should automatically update—this is Hot Module Replacement (HMR) in action.

Building for Production

Once your React project is ready for deployment, you’ll need to generate an optimized production build.

1. Build the Production Version in Terminal

   In your project root servbay-react-demo, run the following command to build for production:

   npm run build

   This executes the build script defined in your package.json. For Vite-based React projects, it compiles, bundles, and optimizes your source code into static files (HTML, CSS, JavaScript, assets, etc.), typically output to the dist folder in your project root. Upon completion, you’ll see a success message in the terminal.

2. Set Up a Static File Server in ServBay

   The generated dist folder contains static files ready to be served by a web server. In ServBay, you can configure a static site pointing to this directory.

   Open the ServBay application, go to the Websites section, and click the add button to create a new website configuration:

   • Name: ServBay React Prod (a descriptive name)
   • Domain: servbay-react.servbay.demo (a demo domain to distinguish from the development domain)
   • Site Type: Select Static
   • Website Root Directory: /Applications/ServBay/www/servbay-react-demo/dist (points to your built dist folder)

   Save the configuration. ServBay will set up the internal web server to serve files from the dist directory directly.

3. Access the Production Site

   Open your browser and visit your production domain: https://servbay-react.servbay.demo.

   What you see now is the optimized, production-built version of your app. This site is also automatically SSL-enabled by ServBay.

Summary

By following these steps, you have successfully used ServBay on macOS to create a React project and set up both a reverse proxy for development mode and static file serving for production. ServBay greatly simplifies local development environment setup and management—especially with built-in Node.js support, flexible website configuration (including reverse proxy and static serving), and automatic SSL—for a smooth React development experience. You can now continue to develop, test, and deploy your React application with confidence.