Creating and Running Vue.js Projects with ServBay

Vue.js is a popular progressive JavaScript framework for building user interfaces. It’s easy to learn, flexible, and offers high performance, making it especially suitable for developing single-page applications (SPA). ServBay is a powerful local web development environment that provides convenient Node.js support for both macOS and Windows platforms—making it an ideal choice for Vue.js development.

This guide will walk you through creating a Vue.js project from scratch using ServBay’s integrated environment, and show you how to access it in both development and production modes.

What is Vue.js?

Vue.js is a progressive JavaScript framework designed for building user interfaces. Unlike other large frameworks, Vue is built with a bottom-up incremental approach. The core library focuses solely on the view layer, making it easy to get started and highly compatible with third-party libraries or existing projects. Vue 3 is the latest major version, introducing many new features and improvements such as faster performance, a smaller bundle size, and enhanced TypeScript support.

Major Features and Advantages of Vue 3

• Composition API: Organize logic in components through function composition, making large component codebases easier to maintain and reuse.
• Performance Enhancements: Vue 3 uses Proxy objects for its reactivity system and optimizes the virtual DOM algorithm for significant performance gains.
• Smaller Bundle Size: Through tree-shaking, the core library is lighter and loads faster.
• Better TypeScript Support: Vue 3 improves TypeScript definitions, offering a smoother experience for TypeScript-powered Vue apps.
• Improved Component Lifecycle: New lifecycle hooks and the Setup function make component logic clearer and easier to manage.

By using Vue 3, developers can efficiently build modern, highly responsive web applications.

Creating and Running a Vue.js Project with ServBay

In this guide, you'll use the Node.js environment provided by ServBay to create and run a Vue.js project. We'll leverage ServBay’s Websites feature to configure the web server, enabling local access via reverse proxy and static file serving.

Prerequisites

Before you begin, make sure you’ve completed the following:

1. Install ServBay: ServBay is installed and set up as your local development environment.
2. Install Node.js Package: Use ServBay’s package manager to install the Node.js package. For detailed steps, see Installing and Using Node.js in ServBay.

Creating a Vue.js Project

1. Initialize the Project

   Start by opening your terminal application. ServBay recommends storing website projects in its default directory. Navigate to that directory and use the npm create vue@latest command to start a new Vue.js project. The @latest flag ensures you’re using the newest version of the Vue CLI or create-vue tool, which typically sets up a Vue 3 project.

   macOS:

   cd /Applications/ServBay/www
   npm create vue@latest

   Windows:

   cd C:\ServBay\www
   npm create vue@latest

   Follow the terminal prompts to enter your project name (it’s recommended to use servbay-vue-app) and select additional features like TypeScript, Vue Router, Pinia, etc. A sample configuration might look like:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Select Yes or No based on your needs
   ✔ Add JSX Support? … No # Select Yes or No based on your needs
   ✔ Add Vue Router for Single Page Application development? … Yes # Recommended to select Yes
   ✔ Add Pinia for state management? … No # Select Yes or No based on your needs
   ✔ Add Vitest for Unit testing? … No # Select Yes or No based on your needs
   ✔ Add an End-to-End Testing Solution? … No # Select Yes or No based on your needs
   ✔ Add ESLint for code quality? … Yes # Recommended to select Yes
   ✔ Add Prettier for code formatting? … Yes # Recommended to select Yes
   ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Select Yes or No based on your needs

2. Install Dependencies

   Once the project is initialized, enter your new directory (servbay-vue-app) and run npm install to install all required dependencies.

   cd servbay-vue-app
   npm install

(Optional) Edit Sample Content

To verify that your project is running properly, you can edit the src/App.vue file, replacing the default content with a simple “Hello ServBay!” message.

Open the src/App.vue file in your project directory and update its contents to:

<template>
  <div id="app">
    <h1>Hello ServBay!</h1>
    <p>This is a Vue.js app running via ServBay.</p>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Setting up the Development Environment (Using Reverse Proxy)

When developing, a Vue project usually starts a local development server (based on Vite or Webpack), offering hot module replacement (HMR) and other developer features. ServBay can map a local domain to this development server’s address and port using reverse proxy.

1. Start the Development Server

   In your project’s root directory, run the following command to launch the development server. Use the --port option to specify a port (such as 8585), and ensure the port is available.

   npm run dev -- --port 8585

   The terminal will confirm the server is running and listening on the chosen port, e.g. http://localhost:8585.

2. Configure Reverse Proxy in ServBay Websites

   Open the ServBay application interface and navigate to the Websites settings. Add a new website configuration, choosing Reverse Proxy as the type:

   • Name: My first Vue dev site (or any other recognizable name)
   • Domain: servbay-vue-dev.servbay.demo (or another preferred .servbay.demo domain)
   • Website Type: Reverse Proxy
   • Target IP: 127.0.0.1
   • Target Port: 8585 (should match the port specified when starting the dev server)

   Save the configuration, and ServBay will automatically update its web server (Caddy or Nginx) settings to proxy servbay-vue-dev.servbay.demo requests to http://127.0.0.1:8585.

   For more detailed steps on configuring a Node.js development site in ServBay, see Adding a Node.js Development Website in ServBay.

3. Accessing in Development Mode

   Make sure ServBay’s web server is running. Open your browser and visit the domain you just configured: https://servbay-vue-dev.servbay.demo.

   Since ServBay automatically sets up SSL certificates (through ServBay User CA or ServBay Public CA) for local domains, you can securely access your local dev site via HTTPS—closely mirroring a production environment. For more information on SSL settings, see Configuring SSL Certificates for Websites in ServBay.

   You should now see your Vue app running in development mode, with hot-reloading making code changes instantly visible.

Building and Deploying for Production (Using Static Site Service)

When your Vue.js project is ready for deployment, you’ll want to build a production-optimized version. This output is typically a bundle of static files (HTML, CSS, JavaScript) which ServBay can serve easily via its static site feature.

1. Build the Production Version

   From your project root, run:

   npm run build

   This will generate an optimized, bundled set of static files in the dist folder at the root of your project.

2. Set Up Static File Serving

   In the ServBay application, go to the Websites settings and add a new configuration selecting Static as the type:

   • Name: My first Vue production site (or another readable name)
   • Domain: servbay-vue-prod.servbay.demo (or another preferred .servbay.demo domain)
   • Website Type: Static
   • Document Root: Point this to the absolute path of the dist directory generated by your build:
     • macOS: /Applications/ServBay/www/servbay-vue-app/dist
     • Windows: C:\ServBay\www\servbay-vue-app\dist

   After saving, ServBay will configure its web server to directly serve the static files in the dist directory.

3. Accessing in Production Mode

   Make sure ServBay’s web server is running. Open your browser and go to the domain configured for production: https://servbay-vue-prod.servbay.demo.

   You’re now viewing your Vue app’s optimized production build, ready to deliver top loading performance. Again, ServBay’s custom domains and automatic SSL let you securely preview your production site locally.

Considerations

• Port Conflicts: If the port you select for npm run dev (e.g., 8585 or another) is already in use, you’ll get an error. Switch to an available port and update the port setting in ServBay’s reverse proxy configuration accordingly.
• ServBay Web Server Status: Ensure the ServBay web server (Caddy or Nginx, depending on your setup) is running—otherwise, your configured domain won’t be accessible.
• Domain Resolution: ServBay automatically resolves .servbay.demo domains you add in Websites to 127.0.0.1. For other domains, you may need to manually edit your system’s hosts file or use ServBay’s Hosts Manager to ensure proper local resolution.

Summary

ServBay allows you to easily set up a Node.js-powered local development environment for Vue.js projects on macOS or Windows, managing both development and production deployments efficiently. Using ServBay’s Websites feature, you can quickly configure reverse proxies for dev servers, serve production static files, and benefit from custom domains and automatic SSL for both convenience and security—greatly streamlining setup and workflows for local Vue.js projects.