61f56f997c
Some checks failed
Test examples / Test Examples (20) (push) Has been cancelled
Test examples / Test Examples (22) (push) Has been cancelled
Lock Threads / action (push) Has been cancelled
Trigger Release / start (push) Has been cancelled
Stale issue handler / stale (push) Has been cancelled
Update Font Data / create-pull-request (push) Has been cancelled
build-and-deploy / deploy-target (push) Has been cancelled
build-and-deploy / build (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-musl - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-unknown-linux-gnu - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-pc-windows-msvc - node@16 (push) Has been cancelled
build-and-deploy / stable - aarch64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / stable - x86_64-apple-darwin - node@16 (push) Has been cancelled
build-and-deploy / build-wasm (nodejs) (push) Has been cancelled
build-and-deploy / build-wasm (web) (push) Has been cancelled
build-and-deploy / Deploy preview tarball (push) Has been cancelled
build-and-deploy / Potentially publish release (push) Has been cancelled
build-and-deploy / publish-turbopack-npm-packages (push) Has been cancelled
build-and-deploy / Deploy examples (push) Has been cancelled
build-and-deploy / thank you, build (push) Has been cancelled
build-and-deploy / Upload Turbopack Bytesize metrics to Datadog (push) Has been cancelled
Rspack Next.js development integration tests / Rspack integration tests (push) Has been cancelled
Rspack Next.js production integration tests / Rspack integration tests (push) Has been cancelled
Turbopack Next.js development integration tests / Next.js integration tests (push) Has been cancelled
Turbopack Next.js production integration tests / Next.js integration tests (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack development test manifest (push) Has been cancelled
Update Rspack test manifest / Update and upload Rspack production test manifest (push) Has been cancelled
Upload bundler test manifests to areweturboyet.com / Upload test results (push) Has been cancelled
Update React / create-pull-request (push) Has been cancelled
test-e2e-project-reset-cron / reset-test-project (push) Has been cancelled
Notify about the top 15 issues/PRs/feature requests (most reacted) in the last 90 days / run (push) Has been cancelled
66 lines
2.7 KiB
Markdown
66 lines
2.7 KiB
Markdown
# Blog with Comment
|
|
|
|
This project adds commenting functionality to [Next.js blog application](https://github.com/vercel/next.js/tree/canary/examples/blog) using Upstash and Auth0.
|
|
|
|
The comment box requires Auth0 authentication for users to add new comments. A user can delete their own comment. Also admin user can delete any comment.
|
|
|
|
Comments are stored in Serverless Redis ([Upstash](http://upstash.com/)).
|
|
|
|
### Demo
|
|
|
|
[https://blog-with-comment.vercel.app/](https://blog-with-comment.vercel.app/)
|
|
|
|
## `1` Project set up
|
|
|
|
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 blog-with-comment blog-with-comment-app
|
|
```
|
|
|
|
## `2` Set up environment variables
|
|
|
|
Copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
|
|
|
|
```bash
|
|
cp .env.local.example .env.local
|
|
```
|
|
|
|
## `3` Configuring Upstash
|
|
|
|
Go to the [Upstash Console](https://console.upstash.com/) and create a new database
|
|
|
|
#### Upstash environment
|
|
|
|
- `REDIS_URL`: Find the URL in the database details page in Upstash Console clicking on **Redis Connect** button.
|
|
|
|
## `4` Configuring Auth0
|
|
|
|
1. Go to the [Auth0 dashboard](https://manage.auth0.com/) and create a new application of type **Single Page Web
|
|
Applications**.
|
|
2. Go to the settings page of the application
|
|
3. Configure the following settings:
|
|
- **Allowed Callback URLs**: Should be set to `http://localhost:3000/` when testing locally or typically
|
|
to `https://myapp.com/` when deploying your application.
|
|
- **Allowed Logout URLs**: Should be set to `http://localhost:3000/` when testing locally or typically
|
|
to `https://myapp.com/` when deploying your application.
|
|
- **Allowed Web Origins**: Should be set to `http://localhost:3000` when testing locally or typically
|
|
to `https://myapp.com/` when deploying your application.
|
|
4. Save the settings.
|
|
|
|
#### Auth0 environment
|
|
|
|
- `NEXT_PUBLIC_AUTH0_DOMAIN`: Can be found in the Auth0 dashboard under `settings`.
|
|
- `NEXT_PUBLIC_AUTH0_CLIENT_ID`: Can be found in the Auth0 dashboard under `settings`.
|
|
- `NEXT_PUBLIC_AUTH0_ADMIN_EMAIL`: This is the email of the admin user which you use while signing in Auth0. Admin is able to delete any comment.
|
|
|
|
## Deploy Your Local Project
|
|
|
|
To deploy your local project to Vercel, push it to GitHub/GitLab/Bitbucket
|
|
and [import to Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=upstash-roadmap).
|
|
|
|
**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to
|
|
match your `.env.local` file.
|