Creating and Running React Projects with ServBay

What is React?

React is an open-source JavaScript library maintained by Meta (formerly Facebook) and its community, designed specifically for building user interfaces (UI). With its component-based architecture, React enables developers to efficiently create complex, maintainable single-page applications (SPA) or the view layer for large-scale web apps. Its key strengths include a declarative programming approach, a highly efficient virtual DOM update mechanism, and a robust community ecosystem.

Core Features and Advantages of React

• Component-based Development: Breaks down complex UIs into independent, reusable components, improving maintainability and code reuse.
• Declarative Views: Developers simply describe the UI's state; React takes care of updating the DOM to match, streamlining UI logic.
• Virtual DOM: Maintains a virtual representation of the DOM in memory, minimizing actual DOM operations through efficient diffing, greatly enhancing performance.
• One-way Data Flow: Data flows from top to bottom, making application state changes easier to track and understand.
• JSX: A JavaScript syntax extension that allows HTML-like structures within JavaScript code, resulting in more readable code.
• Vibrant Ecosystem: Supported by a large community and a plethora of third-party libraries (such as React Router, Redux/Zustand/MobX, Material UI), covering state management, routing, UI components, and more.

With React, developers can build modern, high-performance web applications faster and more effectively.

Setting up React Development and Production Environments with ServBay

ServBay is a powerful local web development environment providing a suite of packages—including Node.js—for macOS and Windows users. This guide walks you through leveraging ServBay’s Node.js environment and Websites feature to create, configure, and run a React project step by step, including reverse proxy setup for development mode and static file serving for production.

Prerequisites

Before you begin, make sure you have:

1. Installed ServBay: ServBay is successfully installed and running on your system.
2. Installed the Node.js package: Node.js package is installed via ServBay’s interface or command-line tool. Refer to the ServBay Node.js installation documentation for detailed steps. ServBay automatically manages Node.js versions and environment variables.

Creating a React Project

We'll use the modern front-end build tool Vite to quickly create a React project. Vite boasts fast cold starts and instant Hot Module Replacement (HMR), significantly improving development experience. It’s now a mainstream choice for new React projects, replacing the older create-react-app.

1. Open your terminal and navigate to the website root directory

   Launch your terminal application. ServBay’s recommended default website root directories are:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Create a new React project using Vite

   Run the following command to scaffold a new project named servbay-react-demo with the React template using create-vite:

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

   • npx is npm’s package runner, letting you execute CLI tools hosted on the npm registry without global installation. This ensures you use the latest create-vite version.
   • create-vite is Vite’s official project scaffolding tool.
   • servbay-react-demo is your new project folder name.
   • --template react initializes the project with the React template structure.

   Follow the on-screen prompts to complete project creation.

3. Enter the project directory and install dependencies

   Change into your new project folder and install the required dependencies using npm:

   cd servbay-react-demo
   npm install

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

Editing React Project Content (Optional)

To verify that the setup works, let's modify the homepage content.

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

   Use your preferred code editor to open src/App.jsx (if you chose the JavaScript template) or src/App.tsx (if you chose TypeScript).

2. Modify the content

   Locate the main rendering section and change 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'll typically run a local development server that features hot module replacement (HMR) for faster workflows. ServBay can forward requests to this development server using a reverse proxy.

1. Start the development server in your terminal

   In the project root directory servbay-react-demo, execute the following command to start the Vite dev server on a specified port (e.g., 8585):

   npm run dev -- --port 8585

   • npm run dev runs the dev script defined in your project’s package.json, typically launching the Vite dev server.
   • -- --port 8585 forwards the port parameter to Vite.

   Once started, the dev server usually displays its local access address (e.g., http://localhost:8585) in the terminal. Keep this terminal window open and do not close the server.

2. Configure reverse proxy in ServBay

   Open ServBay’s application interface. Navigate 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 demonstration domain related to ServBay)
   • Site Type: Select Reverse Proxy
   • Proxy IP: 127.0.0.1 (since the dev server is running locally)
   • Proxy Port: 8585 (matches the port you started your dev server on)

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

   For detailed steps on adding websites in ServBay, see the ServBay website management documentation.

3. Access your development site

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

   • Thanks to ServBay’s robust features, your local development site is automatically secured with an SSL certificate (issued by ServBay User CA or ServBay Public CA), allowing you to access it via HTTPS. For more information on ServBay’s SSL functionality, refer to Securing Your Website with SSL.
   • Now, whenever you modify and save files in your code editor, the browser page should update automatically—that’s hot module replacement (HMR) in action.

Building for Production

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

1. Build the production version in your terminal

   In the project root servbay-react-demo, run the following command:

   npm run build

   This executes the build script defined in your project’s package.json. For Vite-powered React projects, it compiles, bundles, and optimizes your source code into static files (HTML, CSS, JavaScript, assets), typically output to the dist folder in your project root. When complete, the terminal displays a success message.

2. Configure static file serving in ServBay

   The dist folder produced by the build contains static files ready to be served by a web server. In ServBay, you can configure a static website to point to this directory.

   Open ServBay’s application interface, go to the Websites section, and add a new website configuration:

   • Name: ServBay React Prod (a descriptive name)
   • Domain: servbay-react.servbay.demo (a demo domain distinguishing production from development)
   • Site Type: Select Static
   • Website Root Directory: Point to the dist folder generated by your build:
     • macOS: /Applications/ServBay/www/servbay-react-demo/dist
     • Windows: C:\ServBay\www\servbay-react-demo\dist

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

3. Access your production site

   Open your browser and visit the production domain you just configured: https://servbay-react.servbay.demo.

   You’re now viewing the optimized, built production version of your site, which is also secured with SSL by ServBay.

Summary

By following these steps, you’ve successfully used ServBay to create a React project in your local environment, featuring reverse proxy for development mode and static file serving for production. ServBay simplifies the setup and management of local development environments for both macOS and Windows, with built-in Node.js support, flexible website configurations (reverse proxy and static serving), and automatic SSL—making it exceptionally convenient for React developers. You can now continue building, testing, and deploying your React applications with this robust workflow.