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, store, pages, components). Mongoose, MongoDB. Slugify. Tests. Session. Settings page. AWS S3. File upload.
  6. Store. MobX. Store HOC withStore. Authentication HOC withAuth. Login page. Index page.
  7. Google OAuth. Mailchimp.
  8. AWS SES. EmailTemplate. Welcome email.
  9. Passwordless OAuth.
  10. Team. Invitation. Invitation email.
  11. Stripe. Customer. Subscription. Invoice.
  12. Discussion. Post.
  13. Web sockets.
  14. Create Post via email. AWS Lambda. AWS API Gateway.
  15. Deploy to AWS Elastic BeanStalk.

Chapter 3: HTTP. APP server. Next-Express server. Fetch method. API methods. async/await. API server. Express server. Environmental variables. Logs.

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


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

We will cover the following topics in this chapter:

  • HTTP
  • APP server
    - Step 1: Fetch method
    - Step 2: API method at Index page
    - Step 3: Next-Express server. Express route.
    - Client-side and server-side rendered pages
  • Promise and async/await
  • API server
    - API server and API refactor
    - Logs for API server

In Chapter 2, we successfully integrated our Next.js web app with Material-UI and made many layout-related improvements. We discussed in detail two types of rendering in a Next.js web app: server-side and client-side. We set and ran many tests to understand differences between server-side and client-side rendered pages. However, in those tests, our pages did not contain data fetched from the server. We had some static HTML code with a few JavaScript methods, but we never had an API method that sent a request to the server to retrieve data there.

The simplest example of data retrieval can be described like this: An end user loads a page of our web application. That page contains some static HTML and CSS code that shows layout and styles. On this page, our goal is to show the user some data in addition to the static code. The data could be the user's picture or email, so the user knows that he/she is properly authenticated on this page. To implement such a scenario, we have to:

  • create an API method that sends a request from the user's browser (client) to our web app's server
  • in return, the app's server sends a request to database
  • once the app's server receives data, it sends a response with the attached data to user's browser (client)

The above is just a simple example of data retrieval from a database. Once you finish this book, your final web application will have dozens of API methods to not only read data but also create, update, and delete data. The acronym to remember these 4 types of data manipulation is CRUD: create, read, update, delete.

In this chapter, we will only focus on reading the user's email from our application's server. We will talk about our MongoDB database in detail in Chapter 4.

link HTTP

Before we can discuss fetching data in your web application, we need to get familar with the basic concepts of HTTP, request, and response.

Simply put - HTTP (HyperText Transfer Protocol) is a set of rules (protocol) that governs data exchange on the web. These rules specify how a client (typically a web browser, called client because it is served data by a server) and server (typically a web server, a machine that sends data to a client) exchange messages. These messages are request objects (sent by the client to the server) and response objects (sent by the server to the client in response to a request). The data can be an HTML document, image, or practically any other type of data.

In this chapter, our goal is to set up infrastructure to display a user's email address on the Index page. We want to write code in the following way: When a user loads the Index page, the user's browser (the client) sends a request object to the server. The server will process the request object and send back a response object that will have a body parameter that contains an email address.

diagram: browser and server; request and response

The request object has multiple parameters. When we later construct our request object, we will include the following parameters in it: url, method, credentials, and headers (Content-Type and Cookie).

All possible parameters of a request object are here: https://developer.mozilla.org/en-US/docs/Web/API/Request

The parameters we will use are listed below.

url parameter: https://developer.mozilla.org/en-US/docs/Web/API/Request/url

method parameter: https://developer.mozilla.org/en-US/docs/Web/API/Request/method

credentials parameter: https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials

headers parameter: https://developer.mozilla.org/en-US/docs/Web/API/Request/headers

Content-Type header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Type

Cookie header: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cookie

When we receive a response object, we want to check the body property and parse the body's text as JSON.

response object: https://developer.mozilla.org/en-US/docs/Web/API/Response

body parameter: https://developer.mozilla.org/en-US/docs/Web/API/Body

link APP server

So now you know the theory of what we need to implement. We can start making changes to the app project at the ./book/3-begin location. Our final goal is to display the email address of a user when the user loads the Index page.

We can split our entire task into three parts:

  1. Write a method that creates a request object, sends this object to the server at a specified route (url; we called it route since we will send a request to the same website), receives a response object, and returns data (which is the JSON-parsed body of the response) that we requested.

  2. Writing code to create a request object and send it to a particular route is not enough. We also have to write some code that detects a request at a particular route, retrieves this requested data, and returns a response object. We need to create a so-called Express route, a method that gets executed once our Express server receives a request with a matching route. Typically, the goal of an Express route is to retrieve data from a database and send a response with the data attached. We will not discuss our database in this chapter. We discuss MongoDB in detail in the Chapter 4. In this chapter, we will simply hardcode a value for user.email, say team@builderbook.org.

  3. Finally, the method that we create at Step 1 needs to be called when a user loads the Index page. So we need to create an API method that gets called when the browser (client) requests the Index page. This API method will, in turn, call the method from the Step 1 and return data to that method.


This chapter is under construction, you can pre-order this book for $99. The price after book's completion will be $199.

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

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

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


format_list_bulleted
help_outline
lens