Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
9d1f4ee
Fixed the title
ajeetraina Feb 3, 2022
fc71901
Merge branch 'redis-developer:master' into master
ajeetraina Feb 4, 2022
5caa368
Added Netlify Tutorial
ajeetraina Feb 6, 2022
19af88f
Fixed the formatting
ajeetraina Feb 6, 2022
9e8c8e1
Added a New Tutorial on Netlify + Redis Dev Hub Clone
ajeetraina Feb 7, 2022
4bf3799
Added a New Tutorial on Netlify + Redis Dev Hub Clone
ajeetraina Feb 7, 2022
2c7289f
Modified Netlify app
ajeetraina Feb 14, 2022
a8e39ea
Added Netlify tutorial
ajeetraina Feb 14, 2022
4effffc
Added Netlify tutorial
ajeetraina Feb 14, 2022
8956370
Added Netlify tutorial
ajeetraina Feb 14, 2022
6193033
Update docs/create/aws/analytics-using-aws/index-analytics-using-aws.mdx
ajeetraina Feb 16, 2022
37fce18
Update docs/create/aws/index-aws.mdx
ajeetraina Feb 16, 2022
c68fd02
Update docs/create/aws/analytics-using-aws/index-analytics-using-aws.mdx
ajeetraina Feb 16, 2022
67aba2f
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
d491f7d
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
7c6db3d
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
7a73534
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
c719ef7
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
0d738dd
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
eb7f847
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
1503856
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
9274a6e
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
6052095
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
c49172e
Update docs/create/netlify/deploy-docusaurus-to-netlify/index-deploy-…
ajeetraina Feb 16, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
id: index-analytics-using-aws
title: How to Build and Deploy Your Own Analytics Dashboard on AWS using NodeJS and Redis
sidebar_label: Building Analytics Dashboard using NodeJS and then deploy it on AWS
title: How to Build and Deploy Your Own Analytics Dashboard using NodeJS and Redis on the AWS Platform
sidebar_label: Building an Analytics Dashboard using NodeJS, Redis and AWS
slug: /create/aws/analytics-using-aws
authors: [ajeet]
---
Expand Down
4 changes: 2 additions & 2 deletions docs/create/aws/bidding-on-aws/index-bidding-on-aws.mdx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
id: index-bidding-on-aws
title: How to Build a Real-Time Bidding Platform on AWS using NodeJS, AWS Lambda, and Redis
sidebar_label: Building a Real-Time Bidding Platform on AWS using NodeJS, AWS Lambda, and Redis
title: How to Build a Real-Time Bidding Platform using NodeJS, AWS Lambda and Redis
sidebar_label: Building a Real-Time Bidding Platform using NodeJS, AWS Lambda and Redis
slug: /create/aws/bidding-on-aws
authors: [ajeet]
---
Expand Down
8 changes: 4 additions & 4 deletions docs/create/aws/index-aws.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,8 @@ The following links provide you with the available options to run apps on Heroku
<div class="row">
<div class="col">
<RedisCard
title="How to Build a Real-Time Bidding Platform on AWS using NodeJS, AWS Lambda, and Redis"
description="Build a Real-Time Bidding Platform on AWS"
title="How to Build a Real-Time Bidding Platform using NodeJS, AWS Lambda and Redis"
description="Learn how to build a Real-Time Bidding Platform using NodeJS, AWS Lambda and Redis"
page="/create/aws/bidding-on-aws"
/>
</div>
Expand All @@ -60,8 +60,8 @@ The following links provide you with the available options to run apps on Heroku
<div class="row">
<div class="col">
<RedisCard
title="How to Build and Deploy Your Own Analytics Dashboard on AWS using NodeJS and Redis"
description="Learn how to Build and Deploy an Analytics Dashboard using NodeJS and then deploy it on AWS"
title="How to Build and Deploy Your Own Analytics Dashboard using NodeJS and Redis on the AWS Platform"
description="Learn how to Build and Deploy Your Own Analytics Dashboard using NodeJS, AWS Lambda and Redis"
page="/create/aws/analytics-using-aws"
/>
</div>
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
---
id: index-deploy-docusaurus-to-netlify
title: How to Deploy Docusaurus to Netlify in 5 Minutes
sidebar_label: Deploy Docusaurus to Netlify in 5 Minutes
slug: /create/netlify/deploy-docusaurus-to-netlify
---

import RedisCard from '@site/src/theme/RedisCard';


Millions of developers use Netlify to instantly build, deploy and scale their modern web applications. The platform comes with the first class-support for every popular framework like JAMstack, React, VueJS, NextJS, Gatsby, AngularJS, Nuxt, Eleventy, Svelte, Hugo, Astro and so on.


![MyImage](images/preview.png)


The Netlify platform allows developers to build and deploy their site to the global network (CDN) from Git. It delivers out-of-the-box continous integration and continuous deployment. Developers love Netlify because it allows them to focus on building and deploying apps by abstracting all the maintenance work away from them. Features like free SSL, Custom Domain, deploy previews, functions and workflows etc makes Netlify the most comprehensive platform for web projects.

<div class="row">
<div class="col">
<RedisCard
title="How to get started with Netlify"
description="Learn how to deploy and host a Next.js app using Netlify "
page="/create/netlify/getting-started-with-netlify"
/>
</div>
</div>


[In the last tutorial](/create/netlify/getting-started-with-netlify), we leveraged [Netlify CLI](https://docs.netlify.com/cli/get-started/) to build a simple Next.js application built using TailwindCSS and Redis.
In this tutorial, you will see how to deploy a Docusaurus site to Netlify Dashboard UI in 5 minutes.

Let's get started..

### Table of Contents

- Step 1. Sign-in for a new Netlify Account
- Step 2. Connect Netlify to a Git Provider
- Step 3. Import the GitHub repository to your GitHub account
- Step 4. Provide Netlify access to your GitHub repository
- Step 5. Configure site settings for Netlify
- Step 6. Deploy your site
- Step 7. Visit your new Docusaurus site on Netlify


### Step 1. Sign-in for a new Netlify Account

Visit [https://app.netlify.com/](https://app.netlify.com/) and sign up for a Netlify account.

![MyImage](images/netlify-signin.png)

### Step 2. Connect your Netlify account to your Git Provider

Netlify allows you to sign-in using various services, including GitHub, GitLab, Bitbucket, Email and SSO.
For this demo we'll use GitHub. Sign into GitHub to connect it to Netlify.

It will ask you for two-factor authentication.

![MyImage](images/netlify_git.png)


### Step 3. Import the project files to your GitHub account

Once you connect your Netlify account to GitHub, you can start collaborating with your other team members.
Before we do that, let's push a sample Docusaurus site to our GitHub repository. You can use a generic Docusaurus site if you want. The Redis Developer Hub is built on Docusaurus, so we are using it instead.

![MyImage](images/netlify-importexisting.png)

### Step 4. Allow Netlify to access the GitHub repository

Next, Netlify will allow you to import an existing project from a GitHub repository as shown below:

![MyImage](images/netlify-importcode.png)


### Step 5. Configure site settings for Netlify

There are two essential settings that need to be configured.
First, change the URL under `docusaurus.config.js` to any other random URL as shown below:

```javascript title="docusaurus.config.js"
....
module.exports = {
title: 'Redis Developer Hub',
tagline: 'The Home of Redis Developers',
url: 'https://docusaurus-2.netlify.app',
baseUrl: '/',
onBrokenLinks: 'throw',
...
...
```

Secondly, you will need to add a build command as shown below:
![MyImage](images/netlify_buildenviron.png)


### Step 6. Deploy your site

Click "Deploys" on the top navigation, you will see an option "Trigger Deploy" on the right-side.
Choose "Deploy site". If you are performing it for the second time, then choose "Clear cache and deploy site" option.

![MyImage](images/netlify_sitedeploy-inprogress.png)


Monitor the "Deploy Log" carefully to see if any error messages appear in the log.

![MyImage](images/netlify-deploylog.png)

You should now be able to see your Docusaurus site hosted on port 3000.
![MyImage](images/netlify-success.png)

### Step 7. Visit your new Docusaurus site on Netlify

Go to "Sites" on the top navigation menu and click on the latest preview build.

![MyImage](images/netlify_clickpreview.png)

You will able to see that Netlify uploads site assets to a content delivery network and makes your site available.
![MyImage](images/netlify_devhub.png)


### References

- [Netlify Build - A Modern CI-CD Infrastructure for Frontend Teams](https://www.netlify.com/products/build/)
- [Netlify Functions](https://www.netlify.com/products/functions/)
- [Netlify Edge](https://www.netlify.com/products/edge/)
- [Netlify WorkFlow](https://www.netlify.com/products/workflow/)
- [Netlify Analytics](https://www.netlify.com/products/analytics/)
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,214 @@
---
id: index-getting-started-with-netlify
title: Getting Started with Netlify
sidebar_label: Getting Started with Netlify
slug: /create/netlify/getting-started-with-netlify
---

import RedisCard from '@site/src/theme/RedisCard';

Netlify is a popular static site hosting serverless platform. It is a popular way to build, deploy, and scale modern web applications in a much more scalable and secure way.

Netlify helps developers to launch websites and campaigns in minutes with no fuss. Netlify is built primarily for JAMstack sites, which unify JavaScript and APIs to allow applications that are well suited for both developers and content editors.

![Register](recloud_1.png)

### Features of Netlify

- It delivers out-of-the-box continuous integration.
- The platform allows continuous deployment through its support for Git repository deployment.
- It allows developers to focus on building and deploying apps by abstracting all the maintenance work away from the developers.
- The platform provides free SSL, CDN, and continuous integration.
- It has built-in DNS management & SSL certificates.

### How Netlify works?

![MyImages](netlifyimage.png)

1. The developer writes code and stores it in a version control repository (e.g. GitHub).
2. When a new change is merged into the main branch of the repository, a webhook notifies Netlify to deploy a new site.
3. Netlify pulls the latest version of the app from the repository and runs a build command to generate the static site files
4. Netlify then uses Plugins and internal code to make adjustments to your site, pre-render all of your pages in static HTML and improves it further
/
5. Once the build process gets completed, Netlify takes the static assets and pushes them to its global CDN for fast delivery.

In this tutorial, you will see how to deploy a simple Redis caching app built with Next.js and TailwindCSS to Netlify in 5 minutes.


### Table of Contents

- Step 1. Setup a Free Redis Enterprise Cloud Account
- Step 2. Install Netlify CLI
- Step 3. Clone the GitHub repository
- Step 4. Login to Netlify via CLI
- Step 5. Configure Continuous Deployment
- Step 6. Pushing the changes to GitHub
- Step 7. Open the Netlify Admin URL
- Step 8. Add Environment Variable
- Step 9. Trigger the deployment
- Step 10. Accessing the app

### Step 1. Setup a free Redis Enterprise Cloud account

Visit [https://developer.redis.com/create/rediscloud/](https://developer.redis.com/create/rediscloud/) and create a free Redis Enterprise Cloud account. Enable the “RediSearch” module while you create the Redis Enterprise Cloud database. Once you complete the tutorial, you will be provided with the database Endpoint URL and password. Save it for future reference.


![MyImage](recloud_1.png)


### Step 2. Install Netlify CLI#

Netlify’s command line interface (CLI) lets you configure continuous deployment directly from the command line. Run the below command to install Netlify CLI on your local laptop:


```bash

npm install netlify-cli -g
```

Verify if Netlify is installed or not by running the below command:

```bash
netlify version
netlify-cli/8.15.3 darwin-x64 node-v14.17.3
```

### Step 3. Clone the repository

```bash
git clone https://github.com/redis-developer/nextjs-redis-netlify
```


### Step 4. Login to Netlify via CLI

To authenticate and obtain an access token using the command line, run the following command to login to your Netlify account:



```bash
netlify login
```
This will open a browser window, asking you to log in with Netlify and grant access to Netlify CLI.
Once you authenticate, it will ask you to close the window and display the below results:

<details><summary markdown="span"><strong>Result</strong></summary>

```
Already logged in via netlify config on your machine

Run netlify status for account details

To see all available commands run: netlify help
```
</details>



### Step 5. Configure continuous deployent

The ```netlify init``` command allows you to configure continuous deployment for a new or existing site.
It will also allow you to create netlify.toml file if it doesn't exists.

```
netlify init
```



<details><summary markdown="span"><strong>Result</strong></summary>

```
netlify init
? What would you like to do? + Create & configure a new site
? Team: Redis
Choose a unique site name (e.g. super-cool-site-by-redisdeveloper.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): undefined

Site Created

Admin URL: https://app.netlify.com/sites/super-cool-site-by-redisdeveloper
URL: https://super-cool-site-by-redisdeveloper.netlify.app
Site ID: a70bcfb7-b7b1-4fdd-be8b-5eb3b5dbd404

Linked to super-cool-site-by-redis-developer in /Users/redisdeveloper/projects/netlify/basic-caching-demo-nodejs/.netlify/state.json
? Your build command (hugo build/yarn run build/etc): yarn start
? Directory to deploy (blank for current dir): dist
? Netlify functions folder: functions
Adding deploy key to repository...
Deploy key added!

Creating Netlify GitHub Notification Hooks...
Netlify Notification Hooks configured!

Success! Netlify CI/CD Configured!

This site is now configured to automatically deploy from github branches & pull requests

Next steps:

git push Push to your git repository to trigger new site builds
netlify open Open the Netlify admin URL of your site
```
</details>

The above step creates a ```netlify.toml``` file with the following content

```javacript title="netlify.toml"
[build]
command = "npm run build"
publish = ".next"

[[plugins]]
package = "@netlify/plugin-nextjs"

```


### Step 6. Pushing the changes to GitHub

As instructed by Netlify, run the below commands to push the latest changes to GitHub:

```
git add .
git commit -m “Pushing the latest changes”
git push
```

### Step 7. Open the Netlify Admin URL

```bash
netlify open --admin
```

### Step 8. Add Environment Variable for Redis Enterprise Cloud

![Environment Variable](environ_2.png)



### Step 9. Trigger the deployment

Click "Trigger deploy" to deploy the site

![MyImage1](redisdeveloper_3.png)


## Step 10. Accessing the app

Click on the deploy URL and you should be able to access the app as shown:


![MyImage](runningapp.png)

### Try it Yourself

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/redis-developer/nextjs-redis-netlify)

### References

- [Redis Caching app using Next.js, TailwindCSS and Redis](https://github.com/redis-developer/nextjs-redis-netlify)
- [Introduction to Netlify](https://www.netlify.com/)
- [Netlify Functions](https://www.netlify.com/products/functions/)
- [Overview of JAMstack](https://www.netlify.com/jamstack/)

Loading