New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[examples] Added with-couchbase
example
#27184
Merged
kodiakhq
merged 25 commits into
vercel:canary
from
ejscribner:feat/with-couchbase-example
Aug 24, 2021
Merged
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit
Hold shift + click to select a range
1b66e10
adding with-couchbase tutorial
ejscribner 8c5744b
fixing grammar in `README.md` and running lint
ejscribner 6dee2d5
cleaning up default .env values
ejscribner 2f18dd2
Merge branch 'canary' into feat/with-couchbase-example
ejscribner b7102eb
Merge branch 'canary' into feat/with-couchbase-example
ejscribner d9913d3
Merge branch 'canary' into feat/with-couchbase-example
ejscribner dd0a9c6
Merge branch 'canary' into feat/with-couchbase-example
ejscribner e4621cd
Merge branch 'canary' into feat/with-couchbase-example
ejscribner b906095
refactoring TEST_BUCKET_NAME to COUCHBASE_BUCKET
ejscribner ac195bc
Merge branch 'canary' into feat/with-couchbase-example
ejscribner d9e9ad1
Merge branch 'feat/with-couchbase-example' of github.com:ejscribner/n…
ejscribner 8261a06
Merge branch 'canary' into feat/with-couchbase-example
ejscribner 5fb8972
Merge branch 'canary' into feat/with-couchbase-example
ejscribner 55469bb
Merge branch 'canary' into feat/with-couchbase-example
leerob eb91010
Merge branch 'canary' into feat/with-couchbase-example
ejscribner f2a8a15
Merge branch 'canary' into feat/with-couchbase-example
ejscribner 3b56faf
updating couchbase connection method
ejscribner 9b09fbc
removing example query and updating readme
ejscribner 4907923
adding `"private": true` to package.json
ejscribner cab38d1
using ESM to import couchbase
ejscribner f333679
updated to use CSS Modules
ejscribner 3ca888d
fixing lint issue
ejscribner a13e3fb
Apply suggestions from code review
leerob 83f1308
Update examples/with-couchbase/README.md
leerob 6e1f070
Update examples/with-couchbase/package.json
leerob File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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 |
---|---|---|
@@ -0,0 +1,5 @@ | ||
COUCHBASE_USER= | ||
COUCHBASE_PASSWORD= | ||
COUCHBASE_ENDPOINT= | ||
COUCHBASE_BUCKET= | ||
IS_CLOUD_INSTANCE= |
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 |
---|---|---|
@@ -0,0 +1,33 @@ | ||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. | ||
|
||
# dependencies | ||
/node_modules | ||
/.pnp | ||
.pnp.js | ||
|
||
# testing | ||
/coverage | ||
|
||
# next.js | ||
/.next/ | ||
/out/ | ||
|
||
# production | ||
/build | ||
|
||
# misc | ||
.DS_Store | ||
|
||
# debug | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
|
||
# local env files | ||
.env.local | ||
.env.development.local | ||
.env.test.local | ||
.env.production.local | ||
|
||
# IDE Files | ||
.idea/ |
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 |
---|---|---|
@@ -0,0 +1,95 @@ | ||
## Example app using Couchbase | ||
|
||
[Couchbase](https://www.couchbase.com/) is a modern database for enterprise applications. This example will show you how to connect to and use Couchbase in your Next.js app. | ||
|
||
If you want to learn more about Couchbase, visit the following pages: | ||
|
||
- [Couchbase Docs](https://docs.couchbase.com/) | ||
- [Couchbase Developer Portal](https://developer.couchbase.com/) | ||
- [Couchbase Cloud](https://cloud.couchbase.com/sign-up) | ||
|
||
## Preview | ||
|
||
Preview the example live on [StackBlitz](http://stackblitz.com/): | ||
|
||
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-couchbase) | ||
|
||
## Deploy your own | ||
|
||
Once you have access to the environment variables you'll need, deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): | ||
|
||
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-couchbase&project-name=with-couchbase&repository-name=with-couchbase&env=COUCHBASE_USER,COUCHBASE_PASSWORD,COUCHBASE_ENDPOINT,COUCHBASE_BUCKET,IS_CLOUD_INSTANCE&envDescription=Required%20to%20connect%20the%20app%20with%20Couchbase) | ||
|
||
## 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-couchbase with-couchbase-app | ||
# or | ||
yarn create next-app --example with-couchbase with-couchbase-app | ||
``` | ||
|
||
Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
||
## Configuration | ||
|
||
### Set up a Couchbase database | ||
|
||
Set up a Couchbase database either locally or with [Couchbase Cloud](https://cloud.couchbase.com/sign-up). | ||
|
||
Local installation can be accomplished through a variety of methods, but [Docker](https://docs.couchbase.com/server/current/install/getting-started-docker.html) is the simplest. | ||
|
||
After Couchbase is installed, set up a cluster by following [this tutorial](https://docs.couchbase.com/server/current/manage/manage-nodes/create-cluster.html). | ||
|
||
- _NOTE:_ the **eventing** and **analytics** services can be unchecked if memory is a constraint (this is often the case with docker and other local installations). | ||
|
||
A variety of sample buckets can be installed to get up and running with a data model quickly. | ||
|
||
### 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 | ||
``` | ||
|
||
Set each variable on `.env.local`: | ||
|
||
- `COUCHBASE_USERNAME` - The username of an authorized user on your Couchbase instance | ||
- `COUCHBASE_PASSWORD` - The corresponding password for the username specified above | ||
- `COUCHBASE_ENDPOINT` - The endpoint to connect to. Use `localhost` for a local instance of Couchbase, or the Wide Area Network address for a cloud instance. | ||
- `COUCHBASE_BUCKET` - The bucket you'd like to connect to for testing. | ||
- `IS_CLOUD_INSTANCE` - `true` if you are trying to connect to an instance of Couchbase Cloud, `false` otherwise. | ||
|
||
### Run Next.js in development mode | ||
|
||
```bash | ||
npm install | ||
npm run dev | ||
# or | ||
yarn install | ||
yarn dev | ||
``` | ||
|
||
Your app should be up and running on [http://localhost:3000](http://localhost:3000)! If it doesn't work, post on [GitHub discussions](https://github.com/vercel/next.js/discussions). | ||
|
||
You will either see a message stating "You are connected to Couchbase" or "You are NOT connected to Couchbase". Ensure that you have provided the correct environment variables. | ||
|
||
When you are successfully connected, you can refer to the [Couchbase Node.js SDK docs](https://docs.couchbase.com/nodejs-sdk/current/hello-world/start-using-sdk.html) for further instructions on how to query your database. | ||
|
||
## Deploy on Vercel | ||
|
||
You can deploy this app to the cloud with [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). | ||
|
||
#### 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=next-example). | ||
|
||
## Notes | ||
|
||
- When you import your project on Vercel, make sure to click on **Environment Variables** and set the keys to match your `.env.local` file. | ||
|
||
- For a cloud deployment on Vercel, the **Environment Variables** values will need to **correspond to a cloud instance of Couchbase** (localhost will **NOT** connect from a remote server such as Vercel). Find info on [getting started with Couchbase cloud](https://developer.couchbase.com/tutorial-cloud-getting-started/). | ||
|
||
- _Important:_ you will have to allowlist 0.0.0.0/0 as the IP address, since Vercel's serverless deployments use [dynamic IP addresses](https://vercel.com/docs/solutions/databases#allowing-&-blocking-ip-addresses) |
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 |
---|---|---|
@@ -0,0 +1,15 @@ | ||
{ | ||
"private": true, | ||
"scripts": { | ||
"dev": "next dev", | ||
"build": "next build", | ||
"start": "next start" | ||
}, | ||
"dependencies": { | ||
"couchbase": "^3.1.3", | ||
"next": "latest", | ||
"react": "^17.0.2", | ||
"react-dom": "^17.0.2" | ||
}, | ||
"license": "MIT" | ||
} | ||
leerob marked this conversation as resolved.
Show resolved
Hide resolved
|
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 |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import '../styles/globals.css' | ||
|
||
function MyApp({ Component, pageProps }) { | ||
return <Component {...pageProps} /> | ||
} | ||
|
||
export default MyApp |
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 |
---|---|---|
@@ -0,0 +1,78 @@ | ||
import Head from 'next/head' | ||
import styles from '../styles/Home.module.css' | ||
import { connectToDatabase } from '../util/couchbase' | ||
|
||
export default function Home({ isConnected }) { | ||
return ( | ||
<div className={styles.container}> | ||
<Head> | ||
<title>Create Next App</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<main className={styles.main}> | ||
<h1 className={styles.title}> | ||
Welcome to <a href="https://nextjs.org">Next.js with Couchbase!</a> | ||
</h1> | ||
|
||
{isConnected ? ( | ||
<h2 className={`${styles.subtitle} ${styles.green}`}> | ||
You are connected to Couchbase | ||
</h2> | ||
) : ( | ||
<> | ||
<h2 className={`${styles.subtitle} ${styles.red}`}> | ||
You are NOT connected to Couchbase. Try refreshing the page, and | ||
if this error persists check the <code>README.md</code> for | ||
instructions. | ||
</h2> | ||
<em className={styles.center}> | ||
Note: if the database was recently started, you might have to | ||
re-start the app (in dev mode) or re-deploy to your serverless | ||
environment for changes to take effect. | ||
</em> | ||
</> | ||
)} | ||
|
||
<p className={styles.description}> | ||
Get started by editing{' '} | ||
<code className={styles.code}>pages/index.js</code> | ||
</p> | ||
</main> | ||
|
||
<footer className={styles.footer}> | ||
<a | ||
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" | ||
target="_blank" | ||
rel="noopener noreferrer" | ||
> | ||
Powered by{' '} | ||
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} /> | ||
</a> | ||
</footer> | ||
</div> | ||
) | ||
} | ||
|
||
export async function getServerSideProps(context) { | ||
let connection = await connectToDatabase() | ||
|
||
const { collection } = connection | ||
|
||
// Check connection with a KV GET operation for a key that doesnt exist | ||
let isConnected = false | ||
try { | ||
await collection.get('testingConnectionKey') | ||
} catch (err) { | ||
// error message will return 'document not found' if and only if we are connected | ||
// (but this document is not present, we're only trying to test the connection here) | ||
if (err.message === 'document not found') { | ||
isConnected = true | ||
} | ||
// if the error message is anything OTHER THAN 'document not found', the connection is broken | ||
} | ||
|
||
return { | ||
props: { isConnected }, | ||
} | ||
} |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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 |
---|---|---|
@@ -0,0 +1,148 @@ | ||
.small { | ||
font-size: 10px; | ||
} | ||
|
||
.center { | ||
text-align: center; | ||
} | ||
|
||
.red, | ||
.error { | ||
color: indianred; | ||
} | ||
|
||
.green, | ||
.success { | ||
color: lightseagreen; | ||
} | ||
|
||
.container { | ||
min-height: 100vh; | ||
padding: 0 0.5rem; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.main { | ||
padding: 5rem 0; | ||
flex: 1; | ||
display: flex; | ||
flex-direction: column; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.footer { | ||
width: 100%; | ||
height: 100px; | ||
border-top: 1px solid #eaeaea; | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
} | ||
|
||
.footer img { | ||
margin-left: 0.5rem; | ||
} | ||
|
||
.footer a { | ||
display: flex; | ||
justify-content: center; | ||
align-items: center; | ||
text-decoration: none; | ||
color: inherit; | ||
} | ||
|
||
.title a { | ||
color: #0070f3; | ||
text-decoration: none; | ||
} | ||
|
||
.title a:hover, | ||
.title a:focus, | ||
.title a:active { | ||
text-decoration: underline; | ||
} | ||
|
||
.title { | ||
margin: 0; | ||
line-height: 1.15; | ||
font-size: 4rem; | ||
} | ||
|
||
.title, | ||
.description { | ||
text-align: center; | ||
} | ||
|
||
.subtitle { | ||
font-size: 2rem; | ||
text-align: center; | ||
} | ||
|
||
.description { | ||
line-height: 1.5; | ||
font-size: 1.5rem; | ||
} | ||
|
||
.code { | ||
background: #fafafa; | ||
border-radius: 5px; | ||
padding: 0.75rem; | ||
font-size: 1.1rem; | ||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, | ||
Bitstream Vera Sans Mono, Courier New, monospace; | ||
} | ||
|
||
.grid { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
flex-wrap: wrap; | ||
|
||
max-width: 800px; | ||
margin-top: 3rem; | ||
} | ||
|
||
.card { | ||
margin: 1rem; | ||
flex-basis: 45%; | ||
padding: 1.5rem; | ||
text-align: left; | ||
color: inherit; | ||
text-decoration: none; | ||
border: 1px solid #eaeaea; | ||
border-radius: 10px; | ||
transition: color 0.15s ease, border-color 0.15s ease; | ||
} | ||
|
||
.card:hover, | ||
.card:focus, | ||
.card:active { | ||
color: #0070f3; | ||
border-color: #0070f3; | ||
} | ||
|
||
.card h3 { | ||
margin: 0 0 1rem 0; | ||
font-size: 1.5rem; | ||
} | ||
|
||
.card p { | ||
margin: 0; | ||
font-size: 1.25rem; | ||
line-height: 1.5; | ||
} | ||
|
||
.logo { | ||
height: 1em; | ||
} | ||
|
||
@media (max-width: 600px) { | ||
.grid { | ||
width: 100%; | ||
flex-direction: column; | ||
} | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: It'd be great if there was an integration that took care of this for you 😄
https://vercel.com/integrations#databases
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will add this ASAP!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let me know if you have any questions!