Builder Book logo

Book: SaaS Boilerplate

  1. Introduction. Project structure.
  2. GitHub. VS Code Editor. Node. Yarn. TypeScript. TSLint. Next.js. Environmental variables.
  3. Material-UI. Theme. Dark theme. Shared layout. Shared styles. Shared components. Mobile browser.
  4. HTTP. APP server. Next-Express server. Fetch method. API methods. async/await. API server. Express server. Environmental variables. Logs.
  5. User model. Mongoose and MongoDB. MongoDB index. Jest testing. Your Settings page. File upload to AWS S3.
  6. Login page. Session and cookie. Google OAuth API. Authentication HOC withAuth. firstGridItem logic in App HOC.
  7. AWS SES API. Passwordless OAuth API. Mailchimp API.
  8. Application state, App HOC, store and MobX. Data store for User. Toggle theme API. Team. Invitation.
  9. Discussion. Post. Web sockets.
  10. Stripe. Customer. Subscription. Invoice. Send email for new post. AWS Lambda. AWS API Gateway.
  11. Prepare APP and API for production. Deploy to Heroku. Deploy to AWS Elastic BeanStalk.

Chapter 1: GitHub. VS Code Editor. Node. Yarn. TypeScript. TSLint. Next.js. Environmental variables.

Available for pre-order for $99. The price becomes $249 once published.


The section below is a preview of this book, which is in progress. You can pre-order the book for $99. The price after book's completion will be $249.

If you pre-order the book, you will be emailed about new chapters as they become available.

The book is to be completed by August 1, 2020.


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, Git
    - Visual Studio code editor
    - Node, Yarn
    - package.json
    - TypeScript
    - ESLint, Prettier

  • app server: Next.js
    - Next.js: Custom App
    - Next.js: Custom Document
    - Next.js: 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. Alhough we will have occasional detours to discuss basics, these detours will be rare. If you are new to concepts such as HTTP, Promise, 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 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 has two servers: app and api.

The app server is a simple 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 api server is 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.

In this setup, requests that come to app (users loading pages) don't block requests to api (authentication, processing payments, sending emails, sending requests to database). And vice versa, requests that come to api don't block requests to app.

We will discuss in more detail why we need two servers intead of one in Chapter 3, where we introduce api. We will also discuss lambda in more detail in Chapter 13.

In Chapter 1, our sole focus is to set up the 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.

link Setup

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 and most Linux-based operating systems. 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/

link GitHub and Git

If you bought our first book, you know that we make the entire codebase for our book public. For this book, the codebase is hosted on our public repo:

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 guides you from the N-begin 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.

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

To copy the 1-begin codebase 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, find the book folder and enter book/1-begin. As you can see, since this the very beginning of our journey, this folder is empty.

link Visual Studio code editor

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 to be a good choice.

Follow these instractions to install VS code editor:
https://code.visualstudio.com/docs/setup/linux

We use version 1.38 as of writing of this book.

Once installed, open the code editor:
Builder Book

VS 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. You can modify project-specific settings using the Workspace settings. Workspace settings overwrite User settings (narrower settings overwrite global settings).

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

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

Select the tab that says Workspace. Scroll through the list of different settings and set:

{
    "window.zoomLevel": -1,
    "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.

link Node, Yarn

Next, we need to install Node, since our servers are Node applications and many tools that we will use throughout the book require Node.

We recommend using nvm (Node Version Manager).

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 12.4.0:
    nvm install 12.4.0

  • Make it default:
    nvm alias default 12.4.0

  • Check Node version to confirm successful installation:
    node -v

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

Once Node is installed, we can install Yarn, a manager for third-party packages (also called dependencies or modules). Whenever we need to use code developed by other developers, we add the package name and version to a package.json file and run yarn in the app'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 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.19.0.

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

link package.json

As mentioned earlier in this chapter, the final app will consist of app and api servers plus a lambda function. We discuss app server setup in this chapter and introduce api server in Chapter 3.

Both app and api servers are Node applications. Every Node application requires a configuration file: package.json.

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

package.json should contain the app's metadata such as:

  • name,
  • version,
  • scripts,
  • dependenices (described by name and version), among many other required and optional properties.

Read the official docs on other metadata inside the package.json file. For example, the parameters keywords and license are optional, while parameters name and version are required.

Open your newly created package.json file and add following content to it:
package.json :

{
    "name": "1-end-app",
    "version": "1",
    "license": "MIT",
    "scripts": {
        "dev": "next",
        "build": "next build"
    },
    "dependencies": {
        "dotenv": "^8.1.0",
        "next": "9.0.7",
        "react": "16.10.1",
        "react-dom": "16.10.1",
        "typescript": "3.6.3"
    },
    "devDependencies": {
        "@types/node": "12.7.9",
        "@types/react": "16.9.4",
        "@types/react-dom": "16.9.1",
        "@typescript-eslint/eslint-plugin": "^2.4.0",
        "@typescript-eslint/parser": "^2.4.0",
        "eslint": "^6.5.1",
        "eslint-config-prettier": "^6.4.0",
        "eslint-plugin-prettier": "^3.1.1",
        "prettier": "^1.18.2"
    }
}

You can see required metadata like name and version (version has a format of major.minor.patch).

The dependencies 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 app directory.

The devDependencies section contains dependencies that our app uses in development but not in production. Typically, developers use packages in devDependencies to run tests, compile code, or lint code locally. Useful locally but not required in production.

If you see no ^ (caret) and no ~ (tilde) in front of the major.minor.patch version number, then when you run Yarn or Npm, you will install an exact version of the package.

However, if you use ^1.0.0 instead of 1.0.0, then if a version with a higher minor number is available, you may install 1.1.0 instead of 1.0.0.

If you use ~1.0.0 instead of 1.0.0, then if a version with a higher patch number is available, you may install 1.0.1 instead of 1.0.0.

To check if Yarn successfully installed the packages, check the autogenerated node_modules folder or yarn.lock lockfile at the app root directory. The former folder contains the code of third-party packages, and the latter file contains the exact versions of packages and packages they depend on.

The section of package.json called scripts contains shortcuts for commands. At the end of this book, in Chapter 13, the scripts section will contain the following command:

"build": "next build && tsc --project tsconfig.server.json"

You can see that is much easier to type yarn build in your terminal window than yarn next build && tsc --project tsconfig.server.json. Thus, scripts are essentially shortcuts.

In this chapter, the commands are still short enough that shortcuts are not as useful, but they will become more useful as you progress.

We will discuss the dev and build scripts later in this chapter, in section app server.

We can also prepend any command with a so-called environmental variable, for example:

"build": "NODE_ENV=production next build && tsc --project tsconfig.server.json"

But it is better not to store environmental variables (which are typically secret) in package.json. More about this in section Environmental variables.

If you ran the yarn command inside the 1-begin/app folder and found the newly generated node_modules and yarn.lock, then you successfully installed all packages we need for Chapter 1. We will discuss each installed package as we go.


The section above is a preview of this book, which is in progress. You can pre-order the book for $99. The price after book's completion will be $249.

If you pre-order the book, you will be emailed about new chapters as they become available.

The book is to be completed by August 1, 2020.

Available for pre-order for $99. The price becomes $249 once published.


format_list_bulleted
help_outline
lens