Getting Started with Vercel and Redis
Vercel is a popular static web hosting serverless platform for frontend developers. The platform allows developers to host websites and web services, deploy instantly, and scale automatically with minimal configuration.
Vercel is the preferred platform to host Next.js-based web applications. It allows you to deploy serverless functions that take an HTTP request and provide a response. You can use serverless functions to handle user authentication, form submission, database queries, custom Slack commands, and more.
Vercel integrates well with popular tools, such as GitHub, GitLab, Lighthouse, Doppler, and Divjoy. NodeJS, Go, Python, and Ruby are the leading official runtimes supported by Vercel.
Features of Vercel#
- Vercel is focused on the build and deployment aspects of the JAMstack approach.
- The Vercel API provides full control over the Vercel platform, exposed as simple HTTP service endpoints over SSL.
- All endpoints live under the URL https://api.vercel.com and follow the REST architecture.
- Vercel provides custom domains to deploy your code on the live server (vercel.app as the suffix in the domain).
- Vercel provides you with an option to choose any framework of the repository you wish to deploy either Node.js, React, Gatsby, or Next.js (a full-stack React serverless framework that integrates seamlessly with Vercel).
- Vercel integrates with a GitHub repository for automatic deployments upon commits.
In this tutorial, you will learn how to deploy a Node.js based Redis chat application using Vercel in just 5 minutes.
Table of Contents#
- Step 1. Set up a free Redis Enterprise Cloud account
- Step 2. Install Vercel CLI
- Step 3. Log in to your Vercel Account
- Step 4. Clone your GitHub repository
- Step 5. Create a vercel.json file
- Step 6. Set up environment variables
- Step 7. Deploy the Node.js app
- Step 8. Access your app
Step 1. Set up a free Redis Enterprise Cloud account#
Visit developer.redis.com/create/rediscloud/ and create a free Redis Enterprise Cloud account. Once you complete this tutorial, you will be provided with the database endpoint URL and password. Save it for future reference.
TIP
For a limited time, use TIGER200 to get $200 credits on Redis Enterprise Cloud and try all the advanced capabilities!
Step 2. Install Vercel CLI#
Step 3. Log in to your Vercel account#
The vercel login command allows you to log in to your Vercel account through Vercel CLI.
Once Vercel gets connected to your GitHub account, it displays your public repositories. Let us clone https://github.com/redis-developer/basic-redis-chat-app-demo-nodejs to the local repository.
Step 4. Clone the GitHub repository#
The complete source code of the Redis Chat application is hosted here. React and Socket.IO are used for building the frontend while Node.js and Redis power the backend. Redis is used mainly as a database to keep the user/messages data and for sending messages between connected servers.
Step 5. Create a vercel.json for Node.js app#
If you run the vercel init command, it will list various frameworks but you won’t be able to find Node.js, hence you will need to create a vercel.json file as shown below:
Step 6. Set up environment variables#
The vercel env command is used to manage environment variables under a Project, providing functionality to list, add, remove, and pull.
Let us first set up environment variables.
Listing the environment variables:
Step 7. Deploy the Node.js app#
When you run a vercel command in a directory for the first time, Vercel CLI needs to know which scope and Project you want to deploy your directory to. You can choose to either link an existing project or create a new one.
Once the deployment process has completed, a new .vercel directory will be added to your directory. The .vercel directory contains both the organization and project ID of your project.
The "project.json" file contains:
The ID of the Vercel project that you linked ("projectId")
The ID of the user or team your Vercel project is owned by ("orgId")
note
Vercel CLI automatically detects the framework you are using and offers default project settings accordingly.
Step 8. Accessing the app#
Run the following command to deploy the Redis chat app to the Prod environment.
By now, you will be able to login to Chat app and start chatting.
The chat server works as a basic REST API which involves keeping the session and handling the user state in the chat rooms (besides the WebSocket/real-time part). When a WebSocket/real-time server is instantiated, which listens for the next events:
If you want to know how the chat app works internally, refer to this detailed blog tutorial