Creating and Running Vue.js Projects on macOS with ServBay

Vue.js is a popular progressive JavaScript framework for building user interfaces. It's beginner-friendly, flexible, and high-performance, especially suited for developing Single Page Applications (SPA). ServBay is a powerful local web development environment that provides convenient Node.js support for developers, making it an ideal platform for Vue.js development on macOS.

This guide will provide a step-by-step walkthrough on how to utilize ServBay’s integrated environment to create a Vue.js project from scratch and access it through ServBay 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 takes a bottom-up incremental development approach. Its core library focuses solely on the view layer, making it not only easy to learn but also simple to integrate with third-party libraries or existing projects. Vue 3, the latest version, introduces numerous features and improvements such as faster performance, smaller bundle size, and better TypeScript support.

Key Features and Advantages of Vue 3

• Composition API: Organize logic code using function composition, making large component codebases easier to maintain and reuse.
• Performance Enhancements: Vue 3 adopts Proxy objects for its reactivity system and optimizes the virtual DOM algorithm, resulting in significant performance gains.
• Smaller Bundle Size: Thanks to tree-shaking technology, the core library is more lightweight and loads faster.
• Better TypeScript Support: Vue 3 delivers improved TypeScript typings, greatly enhancing developer experience when using TypeScript with Vue.
• Improved Component Lifecycle: New lifecycle hooks and the Setup function make component logic clearer and easier to manage.

With Vue 3, developers can more efficiently build modern, responsive web applications.

Creating and Running a Vue.js Project Using ServBay's Integrated Environment

In this article, we’ll use ServBay’s built-in Node.js environment to create and run a Vue.js project. We will leverage ServBay’s Websites feature to configure a web server and use reverse proxy and static file services for local access to our project.

Prerequisites

Before you start, make sure you've completed the following steps:

1. Install ServBay: You’ve successfully installed the ServBay local development environment on macOS.
2. Install Node.js Package: Use ServBay’s package management to install the Node.js package. For detailed steps, refer to Installing and Using Node.js in ServBay.

Creating a Vue.js Project

1. Initialize the Project

   First, open your terminal application. ServBay recommends storing website projects in the /Applications/ServBay/www directory. Navigate to this directory and use the npm create vue@latest command to initialize a new Vue.js project. The @latest tag ensures you are using the latest version of the Vue CLI or create-vue tool, which typically creates a Vue 3 project.

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

   Follow the prompts in the terminal to input the project name (we recommend servbay-vue-app), and choose whether to enable features like TypeScript, Vue Router, Pinia, etc., based on your project needs. Example configuration:

   ✔ Project name: … servbay-vue-app
   ✔ Add TypeScript? … No # Choose Yes or No as needed
   ✔ Add JSX Support? … No # Choose Yes or No as needed
   ✔ Add Vue Router for Single Page Application development? … Yes # Recommended to select Yes
   ✔ Add Pinia for state management? … No # Choose Yes or No as needed
   ✔ Add Vitest for Unit testing? … No # Choose Yes or No as needed
   ✔ Add an End-to-End Testing Solution? … No # Choose Yes or No as needed
   ✔ 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 # Choose Yes or No as needed

2. Install Dependencies

   Once your project is initialized, navigate into the new servbay-vue-app project folder and run npm install to install all the necessary dependencies.

   cd servbay-vue-app
   npm install

Optional: Modify Sample Project Content

To verify that your project runs successfully, you can edit the src/App.vue file and replace the default content with a simple "Hello ServBay!" output.

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

<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>

Configuring the Development Environment (Using Reverse Proxy)

During development, Vue projects usually start a local development server (based on Vite or Webpack) which provides features like Hot Module Replacement (HMR) for a smoother development process. ServBay can map a local domain to this development server’s address and port by setting up a reverse proxy.

1. Start the Development Server

   In the project root directory, run the following command to start the development server. Use the --port flag to specify a port number (e.g., 8585). Ensure the port is not already occupied by another application.

   npm run dev -- --port 8585

   The terminal will indicate that the development server is running and listening on your specified port, such as http://localhost:8585.

2. Configure ServBay Website Reverse Proxy

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

   • Name: My first Vue dev site (or another easily recognizable name)
   • Domain: servbay-vue-dev.servbay.demo (or another .servbay.demo domain you prefer)
   • Website Type: Reverse Proxy
   • Reverse Proxy Target IP: 127.0.0.1
   • Reverse Proxy Target Port: 8585 (make sure it matches the port you used to start the development server)

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

   For more detailed steps on configuring a Node.js development website in ServBay, refer to Adding a Node.js Development Website in ServBay.

3. Access the Development Mode

   Ensure 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 provides SSL certificates for local domains (using the ServBay User CA or ServBay Public CA), you can securely access your local development site via HTTPS, closely mirroring a production environment. For details on SSL setup, see Configuring SSL Certificates for Sites in ServBay.

   Now, you should see your Vue app running in development mode in the browser, and enjoy the convenience of hot reloading as you modify your code.

Building Production Version and Deployment (Using Static Website Service)

When your Vue.js project is ready for deployment, you need to build an optimized version for production. This output is typically a set of static files (HTML, CSS, JavaScript, etc.), which can be easily deployed through ServBay’s static website feature.

1. Build for Production

   In the project root directory, run the following command to generate a production build:

   npm run build

   The build process will produce a collection of optimized, bundled static files, typically located in the dist folder in your project root.

2. Set Up Static File Service

   Open the ServBay interface and go to the Websites settings. Add a new website configuration and select Static as the type:

   • Name: My first Vue production site (or another easily identifiable name)
   • Domain: servbay-vue-prod.servbay.demo (or another .servbay.demo domain of your choice)
   • Website Type: Static
   • Site Root Directory: /Applications/ServBay/www/servbay-vue-app/dist (pointing to the absolute path of your project's dist folder produced by the build)

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

3. Access the Production Mode

   Ensure the ServBay web server is running. Open your browser and visit the domain you configured for the production build: https://servbay-vue-prod.servbay.demo.

   You are now seeing the production build of your Vue app, optimized for performance. With ServBay’s custom domain and automatic SSL features, you can securely preview your production site locally.

Important Notes

• Port Conflicts: If the port 8585 (or any other you specify) for npm run dev is already in use, you’ll get an error. Use a different free port and ensure the corresponding port in ServBay’s reverse proxy setup is updated to match.
• ServBay Web Server Status: Make sure ServBay's web server (Caddy or Nginx, depending on your ServBay configuration) is running, or you won't be able to access your site via the configured domains.
• Domain Resolution: ServBay automatically configures .servbay.demo domains added in the Websites settings to resolve to localhost (127.0.0.1). If you use a different domain, you may need to manually update your system’s hosts file or use ServBay's Hosts Manager to ensure correct local resolution.

Summary

With ServBay, you can easily build a local development environment on macOS that integrates Node.js, making it simple to manage both the development and production deployments of Vue.js projects. Using ServBay's Websites feature, you can quickly configure reverse proxies for development servers or serve production static files directly, all while enjoying the convenience and security of custom domains and automated SSL certificates. This greatly simplifies the setup and workflow for local Vue.js projects.