You're reading from Modern Full-Stack React Projects Build, maintain, and deploy modern web apps using MongoDB, Express, React, and Node.js

Product type Paperback

Published in Jun 2024

Publisher Packt

ISBN-13 9781837637959

Length 506 pages

Edition 1st Edition

Languages

JavaScript

Tools

MongoDB

Concepts

Full Stack Web Development

Author (1):

Daniel Bugl

View More author details

Table of Contents (28) Chapters

Preface

1. Part 1:Getting Started with Full-Stack Development

2. Chapter 1: Preparing for Full-Stack Development FREE CHAPTER

3. Chapter 2: Getting to Know Node.js and MongoDB

4. Part 2:Building and Deploying Our First Full-Stack Application with a REST API

5. Chapter 3: Implementing a Backend Using Express, Mongoose ODM, and Jest

6. Chapter 4: Integrating a Frontend Using React and TanStack Query

7. Chapter 5: Deploying the Application with Docker and CI/CD

8. Part 3:Practicing Development of Full-Stack Web Applications

9. Chapter 6: Adding Authentication with JWT

10. Chapter 7: Improving the Load Time Using Server-Side Rendering

11. Chapter 8: Making Sure Customers Find You with Search Engine Optimization

12. Chapter 9: Implementing End-to-End Tests Using Playwright

13. Chapter 10: Aggregating and Visualizing Statistics Using MongoDB and Victory

14. Chapter 11: Building a Backend with a GraphQL API

15. Chapter 12: Interfacing with GraphQL on the Frontend Using Apollo Client

16. Part 4:Exploring an Event-Based Full-Stack Architecture

17. Chapter 13: Building an Event-Based Backend Using Express and Socket.IO

18. Chapter 14: Creating a Frontend to Consume and Send Events

19. Chapter 15: Adding Persistence to Socket.IO Using MongoDB

20. Part 5:Advancing to Enterprise-Ready Full-Stack Applications

21. Chapter 16: Getting Started with Next.js

22. Chapter 17: Introducing React Server Components

23. Chapter 18: Advanced Next.js Concepts and Optimizations

24. Chapter 19: Deploying a Next.js App

25. Chapter 20: Diving Deeper into Full-Stack Development

26. Index

Why subscribe?

27. Other Books You May Enjoy

Deploying a Next.js app with Vercel

We are going to start by deploying our app on Vercel, a platform where we can deploy our apps for free in a simple and convenient way. Follow these steps to get started deploying our Next.js app with Vercel:

Copy the existing ch18 folder to a new ch19 folder by running the following command:
```
$ cp -R ch18 ch19
```
Open the ch19 folder in VS Code.
Install the Vercel CLI tool as a global package with the following command:
```
$ npm install -g [email protected]
```
Run the Vercel CLI:
```
$ vercel
```
You will be asked to log in to Vercel. Select either of the login methods and follow the steps provided by Vercel to log in.
After successfully logging in, you will be asked questions about the deployment of your project, confirm all of them with the default values provided by pressing Enter/Return until the Vercel CLI attempts to build your project.