-
Notifications
You must be signed in to change notification settings - Fork 27.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
44 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,93 +1,95 @@ | ||
| # A stateful Next.js application using Redis (Lambda Store) | ||
| # Redis Example | ||
|
|
||
| This example showcases how you can develop dynamic applications using Next.js and Redis as data store. The frontend fetches the data from Redis via Vercel functions. [Lambda Store](https://lambda.store/) is used as managed Redis service. | ||
| This example showcases how to use Redis as a data store in a Next.js project. [Lambda Store](https://lambda.store/) is used as managed Redis service. | ||
|
|
||
| The example is a basic roadmap voting application where users can enter and vote for feature requests. | ||
| The example is a basic roadmap voting application where users can enter and vote for feature requests. It features the following: | ||
|
|
||
| - Users can add and upvote items (features in the roadmap), and enter their email addresses to be notified about the released items. | ||
| - The API records the ip-addresses of the voters, so it does not allow multiple votes on the same item from the same IP address. | ||
| - To find the id of any item, click the vote button, you will see its id on the url. | ||
|
|
||
| ## Demo | ||
|
|
||
| [https://roadmap-voting-demo.vercel.app/](https://roadmap-voting-demo.vercel.app/) | ||
|
|
||
| ## Deploy your own | ||
|
|
||
| Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
| Once you have access to [the environment variables you'll need](#configuration), deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
|
|
||
| [](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-redis) | ||
| [](https://vercel.com/import/git?c=1&s=https://github.com/vercel/next.js/tree/canary/examples/with-redis&env=REDIS_URL&envDescription=Required%20to%20connect%20the%20app%20to%20Redis&envLink=https://github.com/vercel/next.js/tree/canary/examples/with-redis%23configuration) | ||
|
|
||
| ## How to use | ||
|
|
||
| Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: | ||
|
|
||
| ```bash | ||
| npx create-next-app --example with-redis roadmap-voting-app | ||
| npx create-next-app --example with-redis with-redis-app | ||
| # or | ||
| yarn create next-app --example with-redis roadmap-voting-app | ||
| yarn create next-app --example with-redis with-redis-app | ||
| ``` | ||
|
|
||
| ## Configuration | ||
|
|
||
| Your application is running but its backend is not configured. Now we will integrate Lambda Store as data store. If you are planning to deploy to Vercel, you can leverage Vercel-Lambda Store Integration. Otherwise, you can still configure your application via adding environment variable to your Next.js application. We will explain both approaches. | ||
|
|
||
| ### Configuration (without Vercel) | ||
| A data store with Redis is required for the app to work. In the steps above we'll integrate Lambda Store as the data store. | ||
|
|
||
| If you are planning to deploy your application to somewhere other than Vercel, you can still integrate Lambda Store by setting the environment variable. First create an account and a database in [Lambda Store console](https://console.lambda.store/). To connect to Redis, you will need your Redis connection string. You can get the connection string by clicking "Connect" on the Database page within the Lambda Store dashboard as below: | ||
| <img src="https://docs.lambda.store/img/vercel/vercel5.png" width="800" /> | ||
| ### Without Vercel | ||
|
|
||
| Create a file `.env.local` in your application directory and copy your connection string as below: | ||
| `REDIS_URL="YOUR_REDIS_CONNECTION_STRING"` | ||
| If you are planning to deploy your application to somewhere other than Vercel, you'll need to integrate Lambda Store by setting an environment variable. | ||
|
|
||
| Now, you can deploy your application locally or remotely as it is properly configured to access Redis database remotely. | ||
| First, create an account and a database in the [Lambda Store console](https://console.lambda.store/). | ||
|
|
||
| ### Configuration (within Vercel) | ||
| To connect to Redis, you will need your Redis connection string. You can get the connection string by clicking on **Connect** in the Database page within the Lambda Store dashboard as below: | ||
|
|
||
| You can integrate Lambda Store to your Vercel account. The good thing with integration is that once you set up integration, you do not have to visit Lambda Store console anymore. Here the steps for integration and deployment: | ||
| <img src="https://docs.lambda.store/img/vercel/vercel5.png" width="800" /> | ||
|
|
||
| #### Step-1 Add Lambda Store Integration to Your Vercel Account | ||
| Next, create a file called `.env.local` in the root directory and copy your connection string: | ||
|
|
||
| Visit Vercel [Lambda Store Integration](https://vercel.com/integrations/lambdastore) page and click the `Add` button. | ||
| ```bash | ||
| REDIS_URL="YOUR_REDIS_CONNECTION_STRING" | ||
| ``` | ||
|
|
||
| #### Step-2 Configure Integration | ||
| Your app is now connected to a remove Redis database! | ||
|
|
||
| Integration requires [Developer API Key](howto/developerapi.md) which can be created from the [Lambda Store console](https://console.lambda.store). | ||
| ### Using Vercel | ||
|
|
||
| Enter the API key and your registered email address in the integration setup page as below: | ||
| You can add the Lambda Store integration to your Vercel account. Once you set up the integration, you do not have to visit the Lambda Store console anymore. Follow the next steps to setup the integration: | ||
|
|
||
| <img src="https://docs.lambda.store/img/vercel/vercel1.png" width="800" /> | ||
| #### Step 1. Deploy Your Local Project | ||
|
|
||
| #### Step-3 Create Database | ||
| To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import/git?utm_source=github&utm_medium=readme&utm_campaign=next-example). | ||
|
|
||
| In next screen, your databases will be automatically listed. | ||
| #### Step 2. Add the Lambda Store Integration to Your Vercel Account | ||
|
|
||
| New database can be created from the Vercel Integration page as well as the Lambda Store Console. | ||
| Visit Vercel [Lambda Store Integration](https://vercel.com/integrations/lambdastore) page and click the `Add` button. | ||
|
|
||
| <img src="https://docs.lambda.store/img/vercel/vercel2.png" width="800" /> | ||
| #### Step 3. Configure Integration | ||
|
|
||
| After clicking `New Database` button then create a database as below: | ||
| The integration requires a [Developer API Key](howto/developerapi.md) that can be created from the [Lambda Store console](https://console.lambda.store). | ||
|
|
||
| <img src="https://docs.lambda.store/img/vercel/vercel3.png" width="800" /> | ||
| Enter the API key and your registered email address in the integration setup page: | ||
|
|
||
| #### Step-4 Link Database to Your Project | ||
| <img src="https://docs.lambda.store/img/vercel/vercel1.png" width="800" /> | ||
|
|
||
| Select your project from the dropdown menu then click `Link To Project` for any database. | ||
| #### Step 4. Create a Database | ||
|
|
||
| `REDIS_URL` will be automatically set as environment variable for your application. | ||
| In the next page of the integration setup, your databases will be automatically listed. A new database can be created from the Vercel Integration page as well as in the Lambda Store Console: | ||
|
|
||
| <img src="https://docs.lambda.store/img/vercel/vercel4.png" width="800" /> | ||
| <img src="https://docs.lambda.store/img/vercel/vercel2.png" width="800" /> | ||
|
|
||
| <img src="https://docs.lambda.store/img/vercel/vercel5.png" width="800" /> | ||
| Click the **New Database**, you should be able to see the page below: | ||
|
|
||
| You need to re-deploy your application for the environment variable to be effective. We will do this in the next step. | ||
| <img src="https://docs.lambda.store/img/vercel/vercel3.png" width="800" /> | ||
|
|
||
| #### Step-5 Customize and Deploy the Application | ||
| Fill out the form and click on **Create** to have your new database. | ||
|
|
||
| To customize the application, clone the code from your github repository (that is either created via Vercel Deploy or npx create-next-app). Then you can modify the code, for example replace `public/logo.png` with your project's own logo. Once you commit and push your changes, Vercel will deploy your application automatically. For more about deployment options see [Vercel Documentation](https://nextjs.org/docs/deployment)). | ||
| #### Step 5. Link the Database to Your Project | ||
|
|
||
| ## Current Functionality | ||
| Select your project from the dropdown menu then click on **Link To Project** for any database. | ||
|
|
||
| The current application has three functionality: | ||
| `REDIS_URL` will be automatically set as an environment variable for your application. | ||
|
|
||
| - Users can add new features. If you want to remove or edit any item, use lambda store console to connect your Redis database via Redis-cli. To find id of any feature item, click the vote button, you will see its id on the url. Using this id you edit the item via `hset <item_id> title "new title"` | ||
| <img src="https://docs.lambda.store/img/vercel/vercel4.png" width="800" /> | ||
|
|
||
| - Users can upvote feature items. The backend records the ip-addresses of the voters, so it does not allow multiple votes on the same item from the same IP address. | ||
| <img src="https://docs.lambda.store/img/vercel/vercel5.png" width="800" /> | ||
|
|
||
| - Users can enter their email addresses to be notified about the released items. You can get the email addresses using lambda store console to connect your Redis database via Redis-cli. Run `smembers emails` will give you the emails. | ||
| **Important:** You will need to re-deploy your application for the change to be effective. |