Creating and Running a Nuxt.js Project with ServBay

What is Nuxt.js?

Nuxt.js is an open-source framework built upon popular Vue.js, designed for creating modern, high-performance web applications. It abstracts away many complex configurations, allowing developers to focus on core business logic. Nuxt.js is especially suitable for building Server-Side Rendered (SSR) applications, but it also provides powerful Static Site Generation (SSG) features, making it ideal for content-rich, SEO-friendly websites and apps.

Key Features and Advantages of Nuxt.js

• Server-Side Rendering (SSR): Pre-renders Vue pages on the server, resulting in faster initial load times, improved user experience, and better indexing by search engines—crucial for SEO.
• Static Site Generation (SSG): Generates fully static HTML files during build time. This approach offers great performance, easy deployment, and no server runtime overhead—perfect for sites with infrequent content updates, such as blogs or documentation portals.
• Automatic Code Splitting: Nuxt.js automatically splits JavaScript code by route. Only the necessary code is loaded for each visited page, significantly improving app performance.
• File-system Routing: Simply create .vue files inside the pages directory and Nuxt.js generates routes automatically, greatly simplifying route management.
• Modular Ecosystem: Leverage a rich module ecosystem to easily integrate various features and third-party services (like Axios, PWA support, content management systems, etc).
• Convention Over Configuration: Follows established directory structure and naming conventions, reducing the need for tedious configuration.
• Enhanced Development Experience: Features like Hot Module Replacement (HMR) and detailed error reporting all boost development efficiency.

Thanks to these capabilities, Nuxt.js makes building complex, high-performance, SEO-friendly web applications both efficient and convenient.

Setting Up and Running a Nuxt.js Project in ServBay

This guide demonstrates how to harness ServBay’s robust local development environment—particularly its Node.js package and site management features—to create, configure, and run a Nuxt.js project. We'll cover setting up development mode (with reverse proxy) and production mode (using static file service) within ServBay.

Prerequisites

Before starting, ensure you meet the following requirements:

1. ServBay application is successfully installed.
2. The Node.js package is installed and enabled in ServBay. You can check and install this from the “Packages” tab in the ServBay control panel.
3. You’re familiar with Node.js, npm (or Yarn/pnpm), and basic terminal commands.
4. (Recommended) Have a code editor like VS Code installed.

Creating a Nuxt.js Project

We'll quickly bootstrap a Nuxt.js project using the create-nuxt-app scaffolding tool.

1. Open Terminal and Navigate to ServBay’s Website Root Directory

   ServBay’s default website root is recommended for local development projects. Open your terminal application and run the following command to enter that directory:

   macOS:

   cd /Applications/ServBay/www

   Windows:

   cd C:\ServBay\www

2. Initialize a New Nuxt.js Project

   Use the npx create-nuxt-app command to create a new project named servbay-nuxt-app. npx comes bundled with npm 5.2+, letting you run executables from packages without global installation.

   npx create-nuxt-app servbay-nuxt-app

   Follow the terminal prompts to configure your project. Adjust the options as needed. Here’s an example configuration process:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Choose npm or Yarn as your package manager
   ? UI framework: None          # Select a UI framework if required
   ? Nuxt.js modules: Axios      # Pick Nuxt.js modules as needed
   ? Linting tools: ESLint       # Choose linting tools if you want
   ? Testing framework: None     # Select a testing framework if desired
   ? Rendering mode: Universal (SSR / SSG) # Universal supports SSR and SSG
   ? Deployment target: Server (Node.js hosting) # Server is ideal for local dev & Node.js deployments
   ? Development tools: jsconfig.json (Recommended for VS Code) # Choose dev tool configurations as needed

3. Install Project Dependencies

   Enter the newly created project directory and install dependencies using your chosen package manager:

   cd servbay-nuxt-app
   npm install
   # Or use Yarn: yarn install
   # Or pnpm: pnpm install

   Wait until all dependencies are installed.

Modifying Project Output Content

Let’s tweak the homepage file for easy verification—showing a simple text output.

1. Open the pages/index.vue File

   In your code editor, open pages/index.vue within your project directory.

2. Change the File Content

   Replace the content with the following code to display "Hello ServBay!" on the page:

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style scoped>
   div {
     text-align: center;
     margin-top: 50px;
     font-family: sans-serif;
   }
   h1 {
     color: #333;
   }
   </style>

   The scoped attribute in the style tag limits styles to the current component and lightly enhances the output appearance.

Running Development Mode in ServBay

Nuxt.js development servers typically run on a specific local port. To access it via ServBay’s custom domain, SSL certificate, and standard 80/443 ports, we'll configure a reverse proxy using ServBay’s site management features.

1. Launch the Nuxt.js Development Server

   In the project root, run this command to start the Nuxt.js development server. Here, we set the port to 8585 (you can pick any free port):

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run dev -- --port 8585
   # Or use Yarn: yarn dev --port 8585
   # Or pnpm: pnpm run dev --port 8585

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run dev -- --port 8585
   # Or use Yarn: yarn dev --port 8585
   # Or pnpm: pnpm run dev --port 8585

   Once started, the dev server usually runs at http://localhost:8585. Keep this terminal window open to keep the server running.

2. Configure ServBay Site (Reverse Proxy)

   Open the ServBay control panel and switch to the "Sites" tab. Click the + button on the lower left to create a new site configuration:

   • Name: Give it a recognizable name, e.g., Nuxt.js Dev Site (Proxy).
   • Domain: Enter your desired custom domain, such as nuxt-dev.servbay.demo. The .servbay.demo suffix is recommended for ServBay-branded local dev.
   • Website Type: Select Reverse Proxy.
   • IP Address: Enter 127.0.0.1 (the local loopback address).
   • Port: Enter 8585, the port used by your Nuxt.js development server.

   After configuring, click "Add" or "Save." ServBay will automatically update and apply the configuration.

   For a more detailed walkthrough on adding Node.js development sites via reverse proxy in ServBay, see Adding a Node.js Development Site.

3. Access Your Development Site

   Open your web browser and visit the domain you configured in ServBay, e.g., https://nuxt-dev.servbay.demo.

   Through ServBay’s reverse proxy, you can conveniently access your Nuxt.js dev server using a managed custom domain and HTTPS. ServBay auto-generates and configures SSL certificates (signed by ServBay User CA—ensure your system trusts this CA), allowing secure HTTPS even in local development. This is especially useful for simulating production, testing Service Workers, or working on features that require a secure context.

Building and Previewing the Production Version

Once your Nuxt.js project is ready for deployment—or if you want to preview the production build locally—build the project’s production version. For Universal mode projects that require static site generation, typically, you’ll run nuxt generate (or npm run export).

1. Build the Production Version & Generate Static Files

   In your project’s root directory, run the following commands. npm run build compiles project code; npm run export generates corresponding static HTML files in your output directory (default: dist).

   macOS:

   cd /Applications/ServBay/www/servbay-nuxt-app
   npm run build
   npm run export
   # Or with Yarn: yarn build && yarn export
   # Or pnpm: pnpm build && pnpm run export

   Windows:

   cd C:\ServBay\www\servbay-nuxt-app
   npm run build
   npm run export
   # Or with Yarn: yarn build && yarn export
   # Or pnpm: pnpm build && pnpm run export

   After building, you'll find a dist folder in the project directory containing all generated static files.

2. Configure ServBay Site (Static File Service)

   In the ServBay control panel, switch to the "Sites" tab and click the + button to add a new site configuration:

   • Name: Choose a clear name, e.g., Nuxt.js Prod Site (Static).
   • Domain: Specify your desired custom domain for the production site, such as nuxt-prod.servbay.demo.
   • Website Type: Select Static.
   • Website Root Directory: Enter the path to the Nuxt.js static files:
     • macOS: /Applications/ServBay/www/servbay-nuxt-app/dist
     • Windows: C:\ServBay\www\servbay-nuxt-app\dist

   Click "Add" or "Save." ServBay will update and apply the new settings.

3. Access the Production Site

   In your browser, visit the domain configured for the production version, e.g., https://nuxt-prod.servbay.demo.

   ServBay’s high-performance web server (Caddy or Nginx, depending on your configuration) will serve static files directly from the dist directory—this is the optimal way to deliver static content and ensures extremely fast access. You also receive managed SSL certificates and custom domain support via ServBay.

Summary

ServBay makes it easy to manage the local development and preview environments for Nuxt.js projects. Use ServBay’s Node.js package to run dev servers, and set up reverse proxy sites to develop and debug under custom domains and HTTPS. Once development is complete, build and export static files, then preview them locally using ServBay's static site type for high-speed delivery. This workflow leverages ServBay’s convenience and capabilities, simplifying local development and testing for frontend projects. We hope this guide helps you get the most from ServBay for your Nuxt.js development!