We keep our book up to date with recent libraries and packages.

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

In Chapter 1, you will start with the codebase in the 1-begin folder of our saas repo and end up with the codebase in the 1-end folder.

We will cover the following topics in this chapter:

• Setup
  - GitHub and Git
  - Visual Studio code editor
  - Node, Yarn
  - package.json
  - TypeScript
  - ESLint, Prettier
  

• Next.js
  - Server-side rendering
  - Project structure
  - Extension for Document HOC
  - Extension for App HOC
  - Index page

• Testing
  

• Environmental variables
  

As you learned from the Introduction chapter, this book assumes a basic understanding of JavaScript, React, Next.js, and Express. Although we will have occasional detours to discuss important concepts, we will make fewer detours compared to our first book. If you are new to concepts such as HTTP, Promise, syntactic sugar async/await, server-side rendering, MongoDB index - you should read our first book, Builder Book.

In the Introduction chapter, we discussed our motivation to write this book and showed you a final structure of the project you will build in this book. You may have noticed from the project's structure that the final project is made of two projects: app and api.

The app project has code that can run on both browser and server (code inside pages) and code that runs only on the server (code inside server), which is made of a Next-Express server whose main purpose is to either (1) send JSON data to the browser for a client-side rendered page or (2) send a server-side rendered page. The server from app sends most of its requests for data to the api server.

api has server-only code and is made of an Express server that contains all internal and external APIs - for example, an API to display a list of Posts or an API for Google OAuth. The app server sends requests for data to the api server, and the api server sends data to a MongoDB server to CRUD that data in a MongoDB database.

In this setup, page requests that come to the app server or browser do not block requests to the api server (user authentication, processing payments, sending transactional emails, CRUDing data in database). And vice versa - requests that come to api don't block page requests to app. We will discuss this architecture in more detail in Chapter 3, where we introduce the api project. We will also discuss a lambda project in more detail in Chapter 9.

In Chapter 1, our sole focus is to set up the app project. We will not write much code, but we will discuss and create many configurations and configuration files. Please see the table of contents for this chapter. You can always find the table of contents on the left sticky panel or at the top of each chapter.

Setup link

Similar to our first book, we work on Ubuntu 18.04.3 LTS. All installation instructions in this book should work on Ubuntu 18.04.3 LTS, Ubuntu 20.04.1 LTS, and most Linux-based operating systems (Debian). Most instructions will work on MacOS as well. You have to do your own research if you work on Windows. We make no promise to have instructions for Windows-based operating systems.

You can download Ubuntu 18.04.3 LTS from:
https://ubuntu.com/download/desktop

Instructions on installing it to your machine:
https://www.linuxtechi.com/ubuntu-18-04-lts-desktop-installation-guide-screenshots/

GitHub and Git link

If you bought our first book, you know that we make the entire codebase for our book public on GitHub. For this book, the codebase is hosted in our public repo saas:
https://github.com/async-labs/saas/tree/master/book

As you can see, every chapter has two folders: one with the suffix -begin, one with the suffix -end.

Every chapter in the book guides you from the N-begin codebase to N-end codebase. For example, in this chapter we will start with 1-begin and end up with 1-end. The 1-end codebase is identical to the 2-begin codebase, and the 2-end codebase is identical to the 3-begin codebase, etc.

After you succesfully install Ubuntu, press Ctrl+Alt+T to start a new terminal window.

Inside your terminal, navigate to the folder on your computer where you want to save all chapters' folders. Navigate between directories using cd folderName or cd ...

To copy the entire saas repo from GitHub, you have to run a Git command inside your terminal:
git clone https://github.com/async-labs/saas.git

Navigate to the cloned folder. In your terminal, you can type cd book/1-begin. As you can see, since this is the very beginning of our journey, this folder is nearly empty. It contains only one file, .gitignore.

Visual Studio code editor link

At this point, you have installed Ubuntu, used the terminal, and used GitHub and Git to copy the book's codebase to your local machine.

The next step is to install a code editor on your local machine. Over years of writing software, we found Visual Studio code editor (https://code.visualstudio.com) to be a good choice, for now.

Follow these instructions to install VS code editor on your operating system:
https://code.visualstudio.com/docs/setup/linux

We use version 1.52.1 as of writing of this book.

Once installed, open the code editor:

VS code editor has User and Workspace settings:
- You can modify any of the settings for all projects opened with the code editor using the User settings. These settings are specific to your machine.
- You can modify project settings using the Workspace settings. Workspace settings overwrite User settings for a particular project (narrower settings overwrite global settings). These settings are specific to a project.

Read more about settings here:
https://code.visualstudio.com/docs/getstarted/settings

Let's edit some of our Workspace settings. Open the saas folder with your code editor. Then go to File (or Code) > Preferences > Settings:

Select the tab that says Workspace. Scroll through the list of different settings and you can, for example, set up the following configs:

{
"window.zoomLevel": 0,
"files.autoSave": "afterDelay",
"git.enableSmartCommit": true,
"editor.formatOnSave": true,
}

The first setting controls the zoom level of your window. You can also adjust it on-the-go by pressing Ctrl+ or Ctrl-.

The second setting allows you to automatically save files after you modify them, without manually clicking Ctrl + S.

The third setting commits changes automatically if there are no staged changes.

The last setting allows the editor to automaticallty format code on every save event. Later on, when you press Ctrl+S, the code editor will apply TSLint formatting to the code.

After you modify these settings, your Workspace settings will be saved to the root of the saas folder inside .vscode/settings.json. You can open the .vscode/settings.json file to see all Workspaces we provided you.

You can find explanations for all settings inside this .vscode/settings.json file:
https://code.visualstudio.com/docs/getstarted/settings#_default-settings
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

We will discuss the dbaeumer.vscode-eslint extension for VS code editor later in this chapter.

Node, Yarn link

Both app and api are Node.js projects. All third-party packages (also called libraries) are built for Node projects.

We recommend using nvm (https://github.com/creationix/nvm) (Node Version Manager) for installing Node and managing its version.

On Ubuntu, press Ctrl+Alt+T to open your terminal (alternatively, use the search bar to search 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.17.0:

  nvm install 18.17.0

• Make it default:

  nvm alias default 18.17.0

• Check Node version to confirm successful installation:

  node -v

Node version, as of writing this book, is 18.17.0.

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

Throughout this book, we are using yarn instead of npm package manager.

Install Yarn on Ubuntu as follows:

• Configure 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 on Yarn's official website. Select your operating system from the "Operating system" dropdown menu.

In this book, the Yarn version is 1.22.5.

At this point, you have Node and Yarn installed on your local machine. Now we can create a Node project by defining a package.json file and installing third-party dependencies defined inside the package.json file using Yarn.

In this book, the Node version is 18.17.0 and Yarn version is 1.22.5.

package.json link

As mentioned earlier in this chapter, the final app will consist of app, api, and lambda projects. We discuss app project setup in this chapter, api project in Chapter 3, and lambda project in Chapter 9.

All three projects are Node projects. Every Node project requires a configuration file: package.json. Learn about this file's metadata from the official docs:

https://docs.npmjs.com/getting-started/using-a-package.json

On your VS code editor, open the cloned saas repo, navigate to the book/1-begin folder, create an app folder and inside it, create a package.json file.

package.json should contain the project's metadata such as:
- name,
- version,
- scripts
- dependenices (described by name and version), among many other required and optional properties.

Some metadata is required and some are optional. The parameters keywords and license are optional, while parameters name and version are required.

Open your newly created package.json file and add the following content to it:
{ "name": "1-end-app", "version": "1", "license": "MIT", "scripts": { "dev": "next", "build": "next build && tsc --project tsconfig.server.json", "lint": "eslint . --ext .ts,.tsx" }, "dependencies": { "dotenv": "^16.3.1", "next": "^14.0.3", "react": "^18.2.0", "react-dom": "^18.2.0", "typescript": "^5.3.2" }, "devDependencies": { "@types/node": "^20.10.1", "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "@typescript-eslint/eslint-plugin": "^6.13.1", "@typescript-eslint/parser": "^6.13.1", "eslint": "^8.54.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-prettier": "^5.0.1", "eslint-plugin-react": "^7.33.2", "prettier": "^3.1.0" } }

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.