Installing Nuxt.js and IDE

views2103
Difficulty:

The choice of operating system does not really matter. All of the following software is free and will fully work on Windows, Linux and macOS. I'm showing an example of Windows 10.

Installing the latest versions of Node.js (https://nodejs.org/en/) and MongoDB (https://www.mongodb.com/try/download/community ). Currently the current version of Node.js 14.16, and MongoDB 4.4.4.

Installing the development environment. I use Microsoft VS Code (https://code.visualstudio.com/).

There are many plugins for VS Code that simplify and speed up development. I can recommend the following: Auto Close Tag, Auto Complete Tag, Auto Rename Tag, Bracket Pair Colorizer 2, Import Cost, npm, npm Intellisense, Path Intellisense, Prettier, SVG, Vetur.

Also installing the Git version control system (https://git-scm.com/downloads ) and register on Github (https://github.com /).

Installing Nuxt.js from scratch

For our project, we will not need this installation option, since we already have a ready-made project. Nevertheless, it is worth briefly talking about how to install a clean Nuxt.js.

Creating an empty folder. Inside it, right-click and select "Open with Code". VS Code opens. In the menu, select Terminal -> New Terminal.

In the console we write:

npx create-nuxt-app Test

Test is the name of the application. The installer will create a new folder with this name and the application will be stored there.

During the installation process, you will be asked in which mode the application will work, which additional modules need to be installed. For more information about the create-nuxt-app installer, you can read here.

The easiest choice for the installer: npm, javascript, ui = none, axios, prettier, testing = none, universal, server, jsconfig.json, ci = none. The items themselves and their order change and are updated, be careful.

Installing a finished project from Github

Project in open access. It can be downloaded as an archive (https://github.com/dergunovs/nuxt-express/archive/main.zip ) or download to your computer via Git. Let's use the second method. Open VS Code. In the terminal we write:

git clone https://github.com/dergunovs/nuxt-express.git

A new folder will be created and all the source files of the project will be stored in it.

Close VS Code, go to the project folder and open VS Code already inside this folder.

First of all, you need to install all the dependencies. We write in the terminal:

npm install

A large node_modules folder will appear - the dependencies are stored there.

Let's set up global variables for development. In the root folder of the project, create a file ".env". In it, specify:

BASE_URL=http://localhost:3000

PORT=3000

SECRET=site

BASE_URL - the domain of your site
PORT - the port on which the application will work
DATABASE - the name of the MongoDB database with which the application will work

Now you can run the project in development mode via the terminal using the command:

npm run dev

Open the browser and at http://localhost:3000 the application will be available.

Author: Aleksandr Dergunov
Published: 3/17/2021