# 02 - Scaffold a Nuxt framework

Watch the YouTube video:

https://www.youtube.com/watch?v=9qVVMLj1Hl0

# TL;DR

Today I will demonstrate how to scaffold a Nuxt framework.

# Executive summary

The first step to building this login system is to scaffold a Nuxt framework. A framework acts as the foundation for your codebase. A login system is typically the first piece of code that gets added to a new project. The Login system is a solid base on which to build a functional, dynamic, yet statically-hosted app.

# Prerequisites

The following technologies are needed for this dev guide:

VS Code,
NPM 5.2+, and
An Internet connection.

NPX ships with NPM 5.2+ but it can also be installed separately:

$ sudo npm install -g npx

# Citations

The following references were used during the writing of this dev guide:

Nuxt installation guide.

# Scaffold a Nuxt framework

Follow these steps to scaffold a Nuxt project:

Open VS Code (or install VS Code first, if required).
Open the built-in terminal window (CTRL + ~).
In the terminal window, navigate to where you want to install the project directory (using "cd.." to go up one directory, and "cd 'FOLDER NAME'" to navigate into a directory called "FOLDER NAME").
Run the following npx command to scaffold a Nuxt app:

$ npx create-nuxt-app login-code

After a moment of downloading code, the CLI (command line interface) starts asking questions.
After answering all the questions, a sub directory called 'login-code' appears and starts filling up with the files and folders that make up your new framework.
Once the installation completes and the command prompt re-appears (either $ or # or >, depending on your privileges or OS (operating system)), you can change to the 'login-code' subdirectory:

$ cd login-code

Run the app in development mode with the following command:

$ npm run dev

The rest of this dev guide:

provides detailed information about Nuxt scaffolding,
does not directly relate to this project, and
can be skipped for the sake of brevity.

# The terminal

A terminal is a text interface that let's you issue commands to the computer.

For instance, the following command will display information about the operating system:

$ lsb_release -a

The result will look similar to "Ubuntu 18.04.4 LTS". This string means:

the name of the operating system is Ubuntu,
the year of release is (20)18,
the month of release is 04 (April),
the point-release (for updates and bug fixes) is 4, and
the operating system is an LTS (long term service) release.

Programmers typically use a majorReleaseNumber.minorReleaseNumber.patchNumber format, e.g. 18.04.4, to identify the numerous versions of their code. In the case of Ubuntu, the version numbers also correspond to release dates.

# The terminal within VS Code

VS Code comes with a built-in terminal.

Use CTRL + ~ to open and close the terminal.

Closing the terminal does not stop any running programs. Click the 'Kill Terminal' icon (it looks like a rubbish bin) to shut down the terminal and 'kill' any processes that may be running in that terminal.

You can run multiple terminals at the same time by clicking the '+' icon.

The directory in the terminal reflects the folder that is open in VS Code (File > Open Folder...[CTRL+K CTRL+O]).

NOTE: It is a convention to switch from calling them 'directories' to calling them 'folders' when you change from the command line (in a terminal) to a GUI application (unless the GUI application is terminal-based, e.g. Nano, Vi (pronounced vee-eye, as in the first two letters in 'visual'), Vim, etc.)

# Scaffold a Nuxt app

There are three ways to scaffold a Nuxt app.

# 1. Scaffold a Nuxt app over the Internet

This is the easiest way to scaffold a Nuxt app, but:

an Internet connection is required for this process to work, and
NPM version 5.2 or later needs to be installed, or npx can be installed separately ($ sudo npm install -g npx).

1a. In the terminal, run the following npx command to scaffold a Nuxt app:

$ npx create-nuxt-app sample-nuxt-app-1

1b. Or you can run the following yarn command to scaffold a Nuxt app if yarn is installed on your system:

$ yarn create-nuxt-app sample-nuxt-app-1

After a moment of downloading code, the CLI (command line interface) starts asking questions.
After answering all the questions, a sub directory called 'sample-nuxt-app-1' appears and starts filling up with the files and folders that make up your new app.
Once the installation completes and the command prompt re-appears (either $ or # or >, depending on your privileges or OS (operating system)), you can change to the 'sample-nuxt-app-1' subdirectory:

$ cd sample-nuxt-app-1

Run the app with the following command:

$ npm run dev

# 2. Scaffold a Nuxt app locally

Installing create-nuxt-app locally means:

an Internet connection is not required when scaffolding a Nuxt app, and
the scaffolding process runs a little faster.

In the terminal, run the following npm command to install create-nuxt-app:

$ sudo npm install -g create-nuxt-app

NOTE 1/2: The 'sudo' command only works for accounts that are listed in the '/etc/sudoers' file.

NOTE 2/2: The '-g' (global) flag makes the 'create-nuxt-app' command available from any directory.

Run the following command to scaffold a Nuxt app:

$ create-nuxt-app sample-nuxt-app-2

Answer the questions.
After installation, change to the 'sample-nuxt-app-2' subdirectory:

$ cd sample-nuxt-app-2

Run the app with the following command:

$ npm run dev

# Uninstall a local create-nuxt-app CLI

In the terminal, run the following npm command to uninstall a local installation of create-nuxt-app:

$ sudo npm uninstall -g create-nuxt-app

# 3. Scaffold a Nuxt app manually

A manual installation provides the most scope for customization when building a Nuxt app.

In the terminal, create a project directory:

$ mkdir sample-nuxt-app-3

Change into the project directory:

$ cd sample-nuxt-app-3

Use npm to initialize a project:

$ npm init -y

NOTE: The '-y' flag initializes a project with default values (no questions asked) by creating a 'package.json' file.

Use npm to install Nuxt into the project directory:

$ npm install nuxt --save

NOTE 1: The '--save' flag adds nuxt to the 'package.json' file.

NOTE 2: A 'sudo' command may be needed to install 'nuxt'.

Add a script entry to the 'package.json' file that runs the app:

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "nuxt"
},

In the terminal, run the app with the following command:

$ npm run dev

A page runs on http://localhost:3000 with a message to "...create the pages directory to suppress this default page." A manual installation is a great option for software engineers with detailed knowledge of how Vue and Nuxt works.

# The (dis)advantages of using frameworks

Frameworks - Vue, VuePress, Gridsome, Nuxt, and others - abstract programmers away from the JavaScript programming language. Luckily, this abstraction does not absolve us from learning the JavaScript language. Frameworks exist to solve a specific problem: How can you build apps that:

run on the most number of platforms,
include the most amount of functionality,
can be built in the least amount of time, and
consumes the least amount of money during development?

You need to quickly ship your app so alpha testing can begin as soon as possible. Refactoring can be addressed later as a post-launch activity. Adding new - or postponed - features can also be deferred*. It is easy to see why frameworks are an absolute necessity for modern development workflows and tool chains.

*The most important feature of an MVP (minimum viable product) is not, as most people believe, being first to market. Instead, the key to engineering a successful MVP lies in building an app that is easily extensible, atomically modular, and totally readable (for when the time comes to onboard new team members). Remember, an MVP needs to be extended at a later date. Building an app that supports the addition - and removal - of new features in isolation of each other is essential to the 'main items deployment strategy' of most MVP's.

# Review

In this dev guide, we:

introduced Nuxt scaffolding,
went through the process of scaffolding a Nuxt framework,
looked at a terminal and compared it the terminal window built into VS Code, and
described 3 different ways of scaffolding a Nuxt framework (over the Internet, locally, and manually).

# Next

In the next dev guide, we are going to build the Login and Register routes.