Creating and Running a Nuxt.js Project with ServBay

What is Nuxt.js?

Nuxt.js is an open-source framework built on top of the popular Vue.js framework, specifically designed for creating modern, high-performance web applications. It abstracts away much of the complex configuration, allowing developers to focus on business logic. Nuxt.js excels at building server-side rendered (SSR) apps, but it also offers powerful static site generation (SSG) capabilities, making it an ideal choice for content-rich, SEO-friendly websites and applications.

Key Features and Advantages of Nuxt.js

• Server-Side Rendering (SSR): Pre-renders Vue pages on the server, resulting in faster initial load speeds, improved user experience, and enhanced search engine crawling for better SEO.
• Static Site Generation (SSG): Generates fully static HTML files at build time. This provides excellent performance, simple deployment, and no need for ongoing server resources—perfect for content that doesn’t change often, like blogs or documentation sites.
• Automatic Code Splitting: Nuxt.js splits JavaScript code by route so that only the required code is loaded when visiting a page, greatly optimizing application performance.
• File-system-based Routing: Automatically generates routing configuration by creating .vue files in the pages directory, simplifying route management.
• Modular Architecture: A rich module ecosystem lets you easily integrate various features and third-party services (like Axios, PWA support, CMS integrations, etc.).
• Convention over Configuration: By following specific directory structures and naming conventions, you can avoid tedious manual configuration.
• Enhanced Developer Experience: Features like hot module replacement (HMR), error reporting, and more boost development efficiency.

With these features, Nuxt.js makes building complex, high-performance, SEO-friendly web applications efficient and straightforward.

Configuring and Running a Nuxt.js Project in ServBay

This guide demonstrates how to leverage ServBay’s powerful local development environment—especially its Node.js packages and website management features—to create, configure, and run a Nuxt.js project. We’ll cover how to set up both development mode (with reverse proxy) and production mode (with static file serving) in ServBay.

Prerequisites

Before you begin, make sure you have:

1. Successfully installed the ServBay application.
2. Installed and enabled the Node.js package in ServBay (check under the “Packages” tab in the ServBay control panel).
3. Some familiarity with Node.js, npm (or Yarn/pnpm), and basic command-line usage.
4. (Recommended) A code editor like VS Code.

Creating a Nuxt.js Project

We’ll use the create-nuxt-app CLI to quickly scaffold a Nuxt.js project.

1. Open Terminal and Navigate to the ServBay Web Root

   By default, ServBay’s web root directory is /Applications/ServBay/www. This is a recommended location for your local development projects. Open your terminal app and run:

   cd /Applications/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 (available in npm 5.2+) allows you to execute package binaries without installing globally.

   npx create-nuxt-app servbay-nuxt-app

   Follow the onscreen prompts and select the options that best fit your needs. Here’s an example configuration process:

   ? Project name: servbay-nuxt-app
   ? Programming language: JavaScript
   ? Package manager: Npm         # Choose your package manager; Npm or Yarn recommended
   ? UI framework: None          # Pick a UI framework if needed
   ? Nuxt.js modules: Axios      # Choose Nuxt.js modules as needed
   ? Linting tools: ESLint       # Choose a linting tool if needed
   ? Testing framework: None     # Pick a test framework as needed
   ? Rendering mode: Universal (SSR / SSG) # Rendering mode, Universal supports SSR & SSG
   ? Deployment target: Server (Node.js hosting) # Recommended for local development and Node.js hosts
   ? Development tools: jsconfig.json (Recommended for VS Code) # Developer tool settings as needed

3. Install Project Dependencies

   Change into your new project directory and install dependencies using your chosen package manager:

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

   Wait for the installation to complete.

Modify Project Output

To easily verify everything is working, let’s change the homepage to display simple text.

1. Open pages/index.vue

   Using your code editor, open the pages/index.vue file within your project.

2. Edit the File Content

   Update the file as shown below 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 on the style tag ensures styles apply only to this component, and the output is lightly styled for improved appearance.

Running in Development Mode with ServBay

The Nuxt.js dev server typically runs on a specific local port. To access it via ServBay’s custom domain, SSL certificate, and standard ports (80/443), we’ll configure a reverse proxy using ServBay’s website management functionality.

1. Start the Nuxt.js Development Server

   At your project root, run the following to start Nuxt.js on port 8585 (choose another free port if needed):

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

   Once started, you’ll usually see the server at http://localhost:8585. Keep this terminal window open so the server continues running.

2. Configure ServBay Website (Reverse Proxy)

   In the ServBay control panel, go to the "Websites" tab. Click the + button in the lower left to add a new website configuration:

   • Name: Enter a recognizable name, like Nuxt.js Dev Site (Proxy).
   • Domain: The custom domain to access in your browser, e.g. nuxt-dev.servbay.demo. Using the .servbay.demo suffix is a recommended ServBay branding practice.
   • Website Type: Select Reverse Proxy.
   • IP Address: Enter 127.0.0.1 (the local loopback address).
   • Port: Enter the port your Nuxt.js dev server is running on (e.g. 8585).

   Click “Add” or “Save” to apply the configuration. ServBay will update and activate the settings automatically.

   For detailed steps, see Adding a Node.js Development Website.

3. Access the Development Website

   Open your web browser and visit your configured domain, such as https://nuxt-dev.servbay.demo.

   Through ServBay’s reverse proxy, you can access your Nuxt.js dev server directly via your custom domain and HTTPS port. ServBay automatically generates and configures an SSL certificate (issued by ServBay User CA—make sure your system trusts this CA) so you can use HTTPS even in development. This is invaluable for simulating production, testing service workers, or working with features requiring a secure context.

Build and Run the Production Version

Once you’re ready to deploy (or preview in a local production-like environment), you’ll need to build the production version. For Universal mode projects that will be generated as static sites, typically you need to run nuxt generate (or use the npm run export script).

1. Build the Production Version and Generate Static Files

   In your project root, run:

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

   After building, you’ll find a dist directory in your project, containing all generated static files.

2. Configure ServBay Website (Static File Service)

   In the ServBay control panel, switch to the "Websites" tab. Click + to add a new site:

   • Name: Enter a recognizable name, like Nuxt.js Prod Site (Static).
   • Domain: The custom domain for your production build, e.g. nuxt-prod.servbay.demo.
   • Website Type: Select Static.
   • Website Root: Enter the path to your Nuxt.js static files, which should be /Applications/ServBay/www/servbay-nuxt-app/dist.

   Click “Add” or “Save” to apply. ServBay will automatically update and activate the configuration.

3. Access the Production Website

   Open your browser and visit the configured production domain, e.g. https://nuxt-prod.servbay.demo.

   ServBay’s high-performance web server (Caddy or Nginx, depending on your setup) will directly serve the files from your dist directory. This is the optimal way to host static content, providing blazing-fast performance. You’ll also get free SSL certificates and custom domain support via ServBay.

Summary

With ServBay, managing the local development and preview environment for your Nuxt.js projects is straightforward. You can leverage ServBay’s Node.js package to run your development server, and use its Website features to configure a reverse proxy for seamless development and debugging with custom domains and HTTPS. When you’re ready, build your project, generate static files, and use ServBay’s Static Website type for high-performance local previews. This workflow maximizes convenience and power, streamlining the local development and testing process for frontend projects. We hope this guide helps you make the most of ServBay for Nuxt.js development!