We keep our book up to date with recent libraries and packages. Latest update Nov 2023.

The section below is a preview of Builder Book. To read the full text, you will need to purchase the book.

You've read about the motivation for writing this book and building a web application. Motivation aside, this book will teach you how to build a modern-stack, production-ready web application from scratch. Together, we will go from 0 to nearly 4,000 lines of code in 9 chapters of this book.

In Chapter 1, you'll start with the codebase in the 1-begin folder of our builderbook repo and end up with the codebase in the 1-end folder. We'll cover the following topics in this chapter:

• Set up Node.js project
  - Installing Node.js and Yarn
  - package.json

• VS code editor and lint
  - VS code editor
  - ESLint and Prettier

• Set up Next.js project
  - Basic structure
  - Compiling code
  - Document HOC
  - App HOC
  - Index page
  - Header component

• Material-UI integration
  - Inject styles and render page on the server
  - theme and ThemeProvider
  - Testing Next.js/Material-UI integration

• Server-side rendering

• Custom styles

Set up Node.js project link

In this book, we work on Ubuntu 18.04.3 LTS as our operating system (OS). Thus, most of the instructions will work for other Linux-based OSs (for example, Debian and macOS). We use Visual Studio code editor (https://code.visualstudio.com). It is installed on our local machine. We find this code editor easier to use and automate than any other popular editor.

The web application that we build in this book has many internal and external API infrastructures. While working on internal APIs, you will learn about HTTP request-response cycle, Express server (routes, middleware, router, methods), API methods, and Mongoose API. While working on external API infrastructures, you will learn about Google API, AWS SES API, Github API, Stripe API, and Mailchimp API services.

The core technologies of the Builder Book app are:
- For the user-facing part of the project: Next.js, React.js, Material-UI.
- For the server-only part of the project: Next.js, Node.js, Next.js, Express.js, Mongoose.js, MongoDB database.

You will also learn how to SEO-optimize your web application and how to deploy to Heroku and AWS Elastic Beanstalk.

We strongly recommend that you check the Table of Contents at https://builderbook.org and check up our public repository at https://github.com/async-labs/builderbook to see the entire list of technologies that you will learn in this book.

Installing Node.js and Yarn link

We are building a Node.js project (or Node for brevity), and many of the libraries (packages) that we use in our project are built for Node projects.

We suggest installing Node with nvm, Node Version Manager:
https://github.com/creationix/nvm

On Ubuntu (or Linux), press Ctrl+Alt+T to open your terminal (alternatively, use the search bar to look for terminal).

• Run the command below to install nvm:

  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

• Check the nvm version to confirm successful installation:

  nvm --version

• Trigger nvm:

  . ~/.nvm/nvm.sh

• Install Node 18.15.0:

  nvm install 18.15.0

• Make it default:

  nvm alias default 18.15.0

• Check Node version to confirm successful installation:

  node -v

Node version should be 18.15.0.

Once Node is installed, we can install Yarn, a manager for third-party packages for Node (also called dependencies or modules or libraries). Whenever we need to use a code package developed by another developer, we add that package's name and version to a package.json file and run yarn in the project's directory (or we can run yarn add packageName@packageVersion). More on package.json in the next subsection.

If you're using Ubuntu:

• Get the Debian package repository for Yarn (https://yarnpkg.com/en/docs/install#linux-tab) by running the following two commands in your terminal:

  curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
  echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

• Then install Yarn with:

  sudo apt-get update && sudo apt-get install yarn

• Check Yarn version to confirm successful installation:

  yarn -v

If you're using another operating system, find specific instructions here:
https://classic.yarnpkg.com/en/docs/install

Select your operating system and Yarn version from the dropdown menus.

In this book, the Node version is 18.15.0 and Yarn version is 1.22.19.

package.json link

package.json is a required file at the root of any Node project. This file contains the project's metadata: name, version, scripts, and dependenices (packages/libraries, described by name and version), among other properties. Read about working with a package.json file to learn more about its metadata:
https://docs.npmjs.com/getting-started/using-a-package.json

Some parameters are optional, like keywords and license, but some are required, like name and version.

Open the 1-begin folder located at https://github.com/async-labs/builderbook/tree/master/book. After cloning this public repository to your local machine, simply open the book directory.

Take a look at our package.json file:
{ "name": "1-begin", "version": "0.0.1", "license": "MIT", "scripts": { "dev": "next", "build": "next build", "start": "next start" }, "dependencies": { "@emotion/cache": "^11.11.0", "@emotion/react": "^11.11.1", "@emotion/server": "^11.11.0", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.14", "@mui/material": "^5.14.14", "next": "^13.5.6", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": {} }

You can see required metadata like name and version (the format for version is major.minor.patch).

The section of package.json called scripts contains shortcuts for commands. Later in this book, in Chapter 2, we will add the following command to the scripts section:

"dev": "nodemon server/server.js --watch server"

This shortcut allows us to run our server and project locally by typing yarn dev in the terminal instead of manually typing:

yarn nodemon server/server.js --watch server

It's ok if you don't understand the above command. We will discuss it detail in Chapter 2 when we create our Next.js/Express.js hybrid server. In this chapter, since there is no server code and no server to start, you will run your project locally with yarn dev, which equates to running yarn next, since our scripts section has "dev": "next".

Inside the scripts section, you may choose to set environmental variable(s) with your command. You would set it up by prepending NODE_ENV=production to one of the commands in the scripts section. For example, later in the book, to build (compile) our code for deployment, we will use the yarn build command with this shortcut:

"build": "NODE_ENV=production next build"</pre>

In this case, the value of NODE_ENV is explicitly set to production. Without specifying the NODE_ENV value explicitly, its value defaults to development. Next.js will compile our project's code with NODE_ENV equal to production so it's ready for production.

We discuss environmental variables and how to manage them with the dotenv package in Chapter 2. In Chapter 2, we will also discuss how to manage server-side environmental variables. In Chapter 8, we will discuss how to make environmental variables universally available (available on the browser and on the server).

The next section in our package.json file is dependencies. This section contains a list of third-party packages that we need in production and development environments. To install all packages from package.json, simply run yarn in your terminal while inside the project's directory (for example, while you are at book/1-begin/ in your terminal)

To check if Yarn successfully installed the packages, look for a newly generated node_modules folder and yarn.lock lockfile at the project's root directory. The former folder contains actual code of third-party packages, and the latter file contains the exact versions of packages and their subdependencies.

devDependencies are dependencies that our project uses in development but not in production. Typically, developers use packages in devDependencies to run tests, compile code locally, or lint code locally.

If you ran the yarn command inside the 1-begin folder, then you successfully installed all packages inside dependencies. As you can see, the devDependencies section is currently empty. We will add packages to it later in this chapter, when we discuss code linting.

VS code editor and lint link

In this section, we will add settings to VS code editor, so we can auto-save edited files and auto-lint files on each save event. We will also discuss and configure code linting with ESLint and Prettier.

VS code editor link

In this book, we recommend Visual Studio code editor (https://code.visualstudio.com), because it is relatively fast and integrates easily with linters and Github. It comes with terminal - this allows you to stay within the code editor while running projects locally. Here is a typical view of the editor with terminal. A list of staged changes is one click away. Here you can see that we have two staged changes:

In addition, VS code editor has many optional settings that may increase your productivity. VS editor has two types of settings: User settings and Workspace settings. Read more about their distinction in Visual Studio's documentation:
https://code.visualstudio.com/docs/getstarted/settings

The User settings are specific to your machine and will apply globally to any project you work on, unless you configured Workspace settings for a particular project - Workspace settings will overwrite User settings.

We provided you with Workspace settings at the root of the repository you cloned to your local machine. These Workspace settings are located in the .vscode folder, in the settings.json file, and in the extensions.json file. The latter file technically does not have settings but has recommended extensions that you need to install in the next subsection.

.vscode/extensions.json file:

{
"recommendations": ["dbaeumer.vscode-eslint"]
}

You can access Workspace Settings by going to File(or Code)>Preferences>Settings>Workspace Settings.

Click the left icon at the top right of your screen to select Open Settings (JSON) and see all Workspace settings together in JSON format.

Here is a list of the Workspace Settings we provided you with - open .vscode/settings.json:

You've reached the end of the Chapter 1 preview. To continue reading, you will need to purchase the book.

We keep our book up to date with recent libraries and packages. Latest update Nov 2023.