Installing and Running Nuxas Locally

Installing and Running Nuxas Locally

In the previous chapter, we installed Node.js, Visual Studio Code, and Git, and we opened the Nuxas project in VS Code. Now it is time to bring the project to life.

This chapter has two parts. First, we install the project's dependencies — the third-party packages that Nuxas needs to run. Second, we start the development server and open the site in your browser.

By the end of this chapter, you will see the Nuxas homepage running on your own computer. This is a significant milestone. Take a moment to enjoy it.

Part 1 — Installing Dependencies

Every modern JavaScript project depends on third-party packages. Nuxt itself is a package. So is Vue, Nitro, and every library Nuxas uses. These packages are listed in a file called package.json, which lives in the root of your project folder.

Installing dependencies means downloading those packages into a folder called node_modules. You only need to do this once, or again whenever package.json changes (for example, after you update Nuxas).

Open the terminal inside VS Code. If you closed it, choose Terminal → New Terminal from the menu.

Make sure the terminal is showing the project root. You can check by typing:

dir

You should see package.json listed among the files. If you do not, you are in the wrong folder. Use cd to navigate to the project folder. For example:

cd C:\Projects\nuxas

Once you are in the correct folder, type the following and press Enter:

npm install

This command tells npm to read package.json and download every package listed there. You will see a progress indicator, and many lines of text will scroll by. This is normal.

The first time you run npm install, it may take two to five minutes, depending on your internet speed. When it finishes, you will see a message like:

added 842 packages, and audited 843 packages in 2m

The exact numbers will differ, but the structure is the same. If you see a message like this, the installation succeeded.

You may also see warnings about vulnerabilities or deprecated packages. These are common in modern JavaScript projects and are not a cause for concern. They do not prevent the project from running.

A note on node_modules: The node_modules folder can be very large — often several hundred megabytes. This is normal. Do not commit it to Git, and do not worry about its size. If you ever need to reinstall dependencies, you can delete node_modules and run npm install again.

Part 2 — Starting the Development Server

Now that dependencies are installed, we can start the development server.

In the same terminal, type:

npm run dev

Press Enter. Nuxt will begin building the project. You will see output like:

  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose
  ➜ press h + enter to show help

The exact lines may differ, but the key information is the Local URL. It is almost always http://localhost:3000/.

Open your browser and go to that URL. You should see the Nuxas homepage: the hero section with the headline, the pricing cards, the testimonials, and the footer.

If you see the homepage, congratulations — Nuxas is running on your computer.

Understanding the Development Server

The development server is a special mode of Nuxt that runs on your computer. It watches your files for changes and rebuilds the site automatically whenever you save a file. This is what makes development fast and pleasant: you edit a file, save it, and the browser updates within a second.

The development server is not the same as a production build. It is slower, it includes extra debugging information, and it should never be exposed to the public internet. We will cover production builds in a later chapter.

To stop the development server, go back to the terminal and press Ctrl + C. You will see the prompt return. To start it again, run npm run dev once more.

Troubleshooting Common Issues on Windows

Most people run npm install and npm run dev without any problems. But if you encounter an issue, here are the most common ones and how to fix them.

Issue: "npm is not recognized as an internal or external command"

This means Node.js is not installed, or it is installed but not on your PATH. Close the terminal, close VS Code, and reopen them. If the issue persists, reinstall Node.js from https://nodejs.org.

Issue: "EACCES: permission denied"

This usually happens when the project is inside a folder that requires administrator permissions, such as C:\Program Files\. Move the project to a folder you own, such as C:\Projects\nuxas or C:\Users\YourName\Documents\nuxas.

Issue: "Port 3000 is already in use"

Another process is using port 3000. This could be another Nuxt project, or it could be an unrelated application. To use a different port, run:

npm run dev -- --port 3001

Then open http://localhost:3001/ in your browser.

Issue: The page loads but shows an error

If the page loads but shows an error message instead of the homepage, look at the terminal. Nuxt prints detailed error messages there, including the file and line number where the error occurred. Copy the message and search for it online, or check if you modified a file incorrectly.

Issue: npm install fails with a network error

This can happen on slow or unstable connections. Try running npm install again. If it continues to fail, try:

npm install --registry=https://registry.npmjs.org/

This forces npm to use the official registry, which is usually the most reliable.

What You Should See

When everything works correctly, opening http://localhost:3000/ shows the Nuxas homepage. You should see:

• A sticky header with the Nuxas logo, the navigation links, and a theme toggle button.
• A hero section with a large headline, a subtitle, two call-to-action buttons, and a code preview image.
• A social proof section with four statistics.
• A features section with six cards.
• A steps section with three numbered cards.
• A pricing section with three tiers.
• A testimonials section with three quotes.
• A final call-to-action band.
• A footer with links and social icons.

If any of these sections are missing or empty, do not panic. In the next chapters, we will configure the site's content, and everything will appear as expected.

What to Expect in the Next Chapter

In the next chapter, we will configure the project for your own domain. This means editing nuxt.config.ts to set your site's URL, and preparing environment variables for services like Stripe and Resend.

This is the first time you will edit a file in the project. Do not worry — we will go slowly, and every change will be explained.

See you in the next chapter.