Introduction to the ServBay Website Management Panel

ServBay offers a powerful and user-friendly local website management panel, making it easy and intuitive to manage and operate your local web development environment. This article provides an in-depth guide to the ServBay website management panel, including its main sections, core features, and usage tips, to help developers efficiently set up and manage local sites.

Panel Overview

The ServBay website management panel acts as the central dashboard for all your local website projects. It abstracts away the complexity of service configurations—such as web servers, SSL certificates, and language versions—offering control via an intuitive graphical interface. The panel is divided into the following main sections:

1. Site List Area: Shows all local website projects you have added in ServBay.
2. Site Details Area: Displays in-depth configuration information and status for the currently selected site.
3. Control Buttons: Quick action buttons located in both the list and details areas for lifecycle management and commonly used operations.

Detailed Breakdown of Major Panel Sections

Site List Area

Located on the left side of the panel, the site list area displays all added local websites in a centralized view. This list lets you quickly browse all projects and select a specific site for detailed viewing and management.

Main Information Columns:

• Site Name: The name you assign to the website project for easy identification.
• Status Indicator: Shows the current service status of the site (e.g., running, stopped, configuration error), typically distinguished by color or icon.
• Domain/Port: Displays the local domain used to access the site via HTTP/HTTPS (e.g., servbay.demo) and the listening port. Typically, clicking the domain opens the site directly in your browser.
• Root Directory: Shows the physical path to the site's files. It's usually recommended to place them in a subdirectory under ServBay’s default root directory /Applications/ServBay/www.

Quick Action Buttons:

Next to each site in the list, you’ll usually find several quick action buttons for instant control:

• Start/Stop Button: Quickly start or stop the web service of the site.
• Delete Button: Remove the site configuration from ServBay (this action does not delete the site's physical files, only its configuration in ServBay).

Site Details Area

After you select a site in the site list area, the details area on the right side displays all detailed information and configuration options for that site. This is the main interface for in-depth management.

Key Information and Configuration Items:

• Basic Information:

  • Site Name: The site's name.
  • Domain: The local domain used to access the site. ServBay automatically adds it to your system hosts file.
  • Root Directory: The physical path to the site's files.
  • Protocol: Displays supported protocols (HTTP, HTTPS).
  • Port: The port the site listens on.
  • Web Server: Shows the type of web server the site uses (e.g., Caddy, Nginx, Apache). ServBay allows you to choose different servers for different sites.

• Configuration Details: This section contains a variety of advanced options. ServBay supports many common development scenarios, such as:

  • SSL/TLS Configuration: Manage HTTPS for the site. ServBay supports easy generation and trust of local SSL certificates with its built-in ServBay User CA or a Public CA. You can also use the ACME protocol (e.g., Let's Encrypt) to obtain valid certificates for local testing or public access.
  • Reverse Proxy: Set up rules to proxy specific path requests to other local services (like Node.js apps or API services). This is especially useful for frontend development to proxy backend APIs or for apps not served directly by web servers.
  • CORS (Cross-Origin Resource Sharing) Configuration: Easily configure CORS headers to resolve common cross-origin issues in local development.
  • Language/Runtime Version Selection: ServBay supports installing and switching among multiple versions of PHP, Node.js, Python, Go, Java, etc. Here, you can specify which PHP version, Node.js version, etc., to use for the current site, ensuring your project runs in the required environment.
  • Environment Variables: Set environment variables for the website process.
  • Additional Configuration: Add custom web server directives.

• Log Viewer: Provides quick access to the site's access (Access Log) and error (Error Log) logs—essential for troubleshooting and performance analysis.

Control Buttons

Control buttons offer convenient interactions, allowing you to rapidly execute common management actions for your sites. These buttons may appear either alongside the site list or in the site details area, depending on the context.

Control Buttons in the Site List (for quick actions):

• Start: Start the selected site's web service.
• Stop: Stop the selected site's web service.

Control Buttons in the Site Details Area (more actions available):

• Open in IDE: Instantly open the site's root directory in your system's default IDE or code editor.
• Open Site: Open the site's address in your default web browser.
• View Logs: Directly open the site's access or error log files for real-time output or historical review.
• Start/Stop/Restart: Control the web service lifecycle for the site currently being viewed. The restart action is usually needed after applying configuration changes.
• Delete: Delete the configuration of the current site from ServBay.

Core Features and Use Cases

The website management panel is not only a tool for displaying information—it’s also the entry point to many of ServBay’s powerful features:

• Multi-language/Multi-version Environment Management: Easily configure different versions of PHP (5.x–8.x), Node.js (LTS, Current), Python, Go, Java, etc., for different projects—eliminating version conflicts.
• Flexible Web Server Selection: Choose Caddy, Nginx, or Apache as the web server for your site based on project needs. Caddy provides auto-HTTPS convenience, while Nginx and Apache offer extensive configuration flexibility.
• Local HTTPS Support: One-click enablement of HTTPS for local sites, using certificates from ServBay User CA or a Public CA. This solves HTTPS issues in development—especially during PWA testing or for APIs requiring a secure context.
• Reverse Proxy Configuration: Easily proxy frontend requests to local backend services (like those built with Express, Django, Spring Boot, etc.).
• Easy CORS Setup: Quickly resolve cross-origin request issues common in local frontend-backend separation scenarios.
• Centralized Log Management: Convenient access to and monitoring of your sites' access and error logs for faster debugging.

Common Operations and Examples

1. Add a New Site: Click the “Add Site” button in the panel, fill in the site name, domain, root directory, choose the web server and language version to quickly create a new site.
2. Modify Site Configuration: Select a site from the list, then modify configuration items (such as changing the PHP version, adding reverse proxy rules, enabling SSL) in the details area; click save and, if needed, restart the service for changes to take effect.
3. Troubleshoot Site Errors: Click the “View Logs” button in the site details area to examine error log files and identify issues.
4. Quickly Access Site Files or Open in Browser: Use “Open in IDE” or “Open Site” buttons in the details area.

Tips & Best Practices

• It’s recommended to organize your site root directories uniformly, such as placing them in subfolders under /Applications/ServBay/www/.
• After modifying configurations, you usually need to restart the site’s service for changes to take effect.
• Deleting a site’s configuration will not delete your project files, so you can proceed with confidence.

Summary

With its clear interface and intuitive controls, ServBay’s website management panel provides developers with an efficient and convenient solution for managing local sites. From basic site lifecycle management to complex SSL, reverse proxy, and multi-version environment setups, the panel covers almost all common web development needs. Mastering the ServBay management panel can greatly enhance your productivity and local development experience. By making good use of its extensive features, you can focus more on coding—and less on tedious environment configuration.