Integrating Momento with your Netlify app
Netlify is a popular platform for building, deploying, and scaling modern websites and apps. Their offerings include an advanced global CDN, Git-integrated CI/CD, and free automatic HTTPS support. Their deployment process integrates directly with your Git repositories, making initial deployment about as simple as choosing a repository. Once deployed, updating your sites and apps is handled automatically as you push your changes to Git.
To get this app deployed and running, you'll need to have the following available:
- An account with a Git provider such as GitHub, GitLab, or Bitbucket.
- A Netlify account.
Create Cache button on the top right of the page:
Create a cache called
chat. You can create the cache in your choice of cloud provider, AWS or GCP, and in any region.
After pressing the
Create button you'll see the new
chat cache in the list of available caches.
Notice the region you created your cache in is also displayed in the list of caches. You'll need to make sure that you choose the same region when you generate a Momento authentication token in the next step. Navigate to the api-keys page, choose the cloud provider and region you used to create your cache, choose the
Super User Key token type, and hit the
Generate Key button.
API Key and save it in a safe place. You'll need to use it later to configure your Netlify deployment, where you will add it as an environment variable for use in the chat app.
Deploying with Netlify
After logging into Netlify, navigate to your team's
Sites page and select
Add New Site ->
Import an Existing Project.
Then choose your Git provider to display a list of your repositories.
From the list of repositories available to you, select
The next screen allows you to configure your deployment. You'll be deploying from the
Base directory in the
Build settings section of the page. The path to the chat example is
/examples/web/nextjs-chat, so you'll enter that as the
Assuming you've entered the base directory correctly, you should see some magic happen. Netlify has examined the contents of the base directory and detected that our project is using Next.js. That allows it to fill out the rest of the build settings form for us. The values it has chosen look good, so you can move on to the final step of configuration: environment variables.
Recall that we generated and saved a Momento API key earlier for use with this application. Use the
Add environment variables button below the build settings to add an environment variable with
MOMENTO_API_KEY as the key and the token you generated as the value. Next, add a second environment variable with
NEXT_PUBLIC_MOMENTO_CACHE_NAME as the key and
chat as the value to point your app to the cache you created earlier. And that's all there is to do to configure the deployment. Press the
During the deployment, Netlify displays a detailed log showing what it's doing to build and publish your site and, if necessary, reporting on deployment failures to assist in troubleshooting. If all went as planned, you'll be directed to a page summarizing the deployment.
You're now ready to chat with your friends! Navigate to the
Site overview in the left nav to find the URL that was generated for your site. You would, of course, set up a custom domain were this a production app, but the generated netlify.app URL is good enough for our purposes.
Clicking on the
https://charming-salmiakki-e07713.netlify.app/ link in the overview (your URL will, of course, be different) reveals your chat app's lobby screen. Use
chat as the name of the chat room. You could use any name, but using
chat makes it easy to remember and share. If it doesn't exist, the chat room will be created.
The final step is to choose a username for the chat.
Now all that's left is to share the URL, cache, and room name with the people you'd like to invite to your chat!
We hope this quick tutorial has given you an idea of how simple and straightforward it is to deploy a Momento-powered application with Netlify. Feel free, of course, to dive into the code for this chat example as well. We hope you'll also enjoy the simplicity of the Momento Topics feature that powers the chat, especially when compared to alternative approaches such as polling and web sockets. And we especially look forward to seeing what our customers build and deploy with Momento in the future!