Skip to content

Commit c0ddce5

Browse files
committed
Update readme
1 parent 5217a5a commit c0ddce5

File tree

1 file changed

+52
-18
lines changed

1 file changed

+52
-18
lines changed

README.md

Lines changed: 52 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,18 @@
11
# Quickstart for using Couchbase with Next.js
22

3-
43
## Deployment Instructions
4+
5+
The deployment instructions are specifically for [Vercel](https://vercel.com/). If you are deploying on other platforms, you need to adapt the instructions for running the project [locally](#run-the-code-locally).
6+
7+
### Prerequisites
8+
9+
To deploy this project on Vercel, you will need:
10+
11+
- Vercel Account
12+
- Access to a Couchbase Cluster (Capella recommended) running the [Query Service](https://docs.couchbase.com/server/current/learn/services-and-indexes/services/query-service.html)
13+
14+
### Steps
15+
516
1. Create a new Capella database (or use existing one) at [cloud.couchbase.com](https://cloud.couchbase.com/).
617
2. Create a bucket called `user_profile`, and a collection called `profile` (within the `_default` scope).
718
- **Note:** the `build` step will attempt to create the collection within your `CB_BUCKET` on deployment.
@@ -10,100 +21,123 @@
1021
&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fcouchbase-examples%2Fnextjs-quickstart&project-name=couchbase-nextjs-quickstart&repository-name=couchbase-nextjs-quickstart&developer-id=oac_5eS7l7O4wvTE47rCKEYSFLQT&integration-ids=oac_5eS7l7O4wvTE47rCKEYSFLQT"><img src="https://vercel.com/button" alt="Deploy with Vercel" width="140px"/></a>
1122

1223
4. Follow the steps when prompted. The integration step will open the Couchbase Capella UI and allow you to select resources to connect.
13-
- If you don't have a Capella account, you can sign up at this point, but you'll have to re-deploy the application a second time once the database has finished provisioning. Read more in #2 of the [Pitfalls and FAQ section](#common-pitfalls-and-faqs) below.
24+
- If you don't have a Capella account, you can sign up at this point, but you'll have to re-deploy the application a second time once the database has finished provisioning. Read more in #2 of the [Pitfalls and FAQ section](#common-pitfalls-and-faqs) below.
1425
5. Explore the newly deployed application: create, update, and delete some user profiles. A few sample profiles will be added automatically, and you can load the sample data manually by following [these instructions](#sample-data).
1526

1627
### Common Pitfalls and FAQs
28+
1729
1. **Deployment Failed**
18-
- This usually occurs when the environment variables are missing or not yet set (such as when waiting for a new database to be provisioned). Inspect the build logs for more information, and ensure the environment variables have been set.
19-
- When **deploying a new trial database**, you'll need to manually create the correct bucket/collection, update the variables in your Vercel console, and re-deploy to pick up the new values.
20-
- **Note:** A re-deploy is _required_ after any changes to the environment variables, as this is the only way to apply the changes. **This can be done from the "deployments" tab on the project's dashboard (click the three dots on the row for your failed deployment and click "redeploy").**
30+
31+
- This usually occurs when the environment variables are missing or not yet set (such as when waiting for a new database to be provisioned). Inspect the build logs for more information, and ensure the environment variables have been set.
32+
- When **deploying a new trial database**, you'll need to wait until the environment variables are set in your Vercel console, and re-deploy to pick up the new values.
33+
- **Note:** A re-deploy is _required_ after any changes to the environment variables, as this is the only way to apply the changes. **This can be done from the "deployments" tab on the project's dashboard (click the three dots on the row for your failed deployment and click "redeploy").**
34+
2135
2. **Integrated with a new trial database**
22-
- Although the integration supports the creation of new trial databases, this project requires a different bucket/scope/collection than the default trial database. If you've deployed this template with a trial, please be sure to add a bucket named `user_profile`, a `_default` scope, and a collection named `profile`, and update the `CB_BUCKET` to `user_profile`.
23-
- Be sure to re-deploy after updating the environment variables.
24-
- This is related to the previous, and issues will manifest as deployment failures.
36+
37+
- If you've deployed this template with a trial database, note that the `profile` collection will be created as a part of the `travel-sample` bucket during the initial build.
38+
- Be sure to re-deploy after updating the environment variables if the initial build fails.
39+
- This is related to the previous, and issues will manifest as deployment failures.
40+
2541
3. **Infinite Loading State OR `Query failed: parsing error` OR `Query failed: bucket not found`**
26-
- No data received from the database. Be sure you are using a bucket named `user_profile`, a `_default` scope, and a collection named `profile`.
27-
- **Note:** while you can _technically_ change the bucket name (via the environment variables), the scope and collections are hardcoded in `/api/user.js`. If you'd like to modify these, you'll need to adjust the queries used in the API layer.
42+
43+
- No data received from the database. Be sure you are using the right bucket in your `CB_BUCKET` environment variable, a `_default`scope, and a collection named`profile`.
44+
2845
4. **504 Gateway Timeout after deploying**
29-
- This error usually occurs when the application cannot reach the database. Ensure that the environment variables are correct, IP addresses are allowed, and the Database User credentials match those in the environment variables.
3046

47+
- This error usually occurs when the application cannot reach the database. Ensure that the environment variables are correct, IP addresses are allowed, and the Database User credentials match those in the environment variables.
3148

3249
## Run the Code Locally
50+
3351
### Prerequisites
52+
3453
To run this project locally, you will need:
54+
3555
- A Couchbase Capella database or Couchbase 7+ database running locally
3656
- Node.js & NPM
3757
- Next.js
3858
- Code Editor
3959

4060
### Get Started
61+
4162
Clone the source code:
63+
4264
```sh
4365
git clone https://github.com/couchbase-examples/nextjs-quickstart.git
4466
```
4567

4668
Install required dependencies:
69+
4770
```sh
4871
npm install
4972
```
5073

5174
**If you are using Capella**, you'll have to manually create a bucket named `user_profile` and a collection named `profile`. See the documentation on [managing buckets](https://docs.couchbase.com/cloud/clusters/data-service/manage-buckets.html) and [creating a collection](https://docs.couchbase.com/cloud/clusters/data-service/scopes-collections.html#create-a-collection) for more information. Note that this collection should be created on the `_default` scope.
5275

5376
### Update environment variables appropriately
54-
We've included a `.env.local.example` file with blank values for you to copy into a file called `.env.local` and fill in the values. We've also included a `.env.default` file for testing and running in GitPod. In most cases, you can ignore the default config file.
77+
78+
We've included a `.env.local.example` file with blank values for you to copy into a file called `.env.local` and fill in the values. We've also included a `.env.default` file for testing and running in GitPod. In most cases, you can ignore the default config file.
79+
5580
- `CB_USERNAME` - The username of an authorized user on your database. Follow [these instructions](https://docs.couchbase.com/cloud/clusters/manage-database-users.html#create-database-credentials) to create database credentials on Capella.
5681
- `CB_PASSWORD` - The password that corresponds to the user specified above.
5782
- `CB_CONNECT_STRING` - The Couchbase connection string. Use the connection string specified on the 'Connect' tab within Capella (formatted like `couchbases://cb.<xxxxxx>.cloud.couchbase.com`) or `couchbase://localhost` for a local/Docker database.
5883
- `CB_BUCKET` - The bucket you'd like to connect to. Set this to `user_profiles` for this template.
5984

6085
### Set up and Run The Application
86+
6187
If you have Couchbase running locally, we can create the bucket and collection by running the following command:
88+
6289
```sh
6390
npm run init-db:local
6491
```
6592

6693
If you'd like to add the sample data, run:
94+
6795
```sh
6896
npm run load-sample-data
6997
```
98+
7099
**Note:** this will also attempt to create a `profile` collection.
71100

72101
**Extra Step for Capella Databases**: if you've manually set up your bucket and collection, you'll need to create the necessary indices as well. To accomplish this, run:
102+
73103
```sh
74104
npm run build-indexes
75105
```
106+
76107
This is because the index creation code is contained within the database initialization script, which we don't use for Capella databases.
77108

78109
Now we're ready to run our application:
110+
79111
```sh
80112
npm run dev
81113
```
82114

83115
If everything is configured properly, you should be able to navigate to localhost:3000 to see the example application. For troubleshooting and additional setup instructions please refer to the `NextJS_README.md` included in the with-couchbase starter.
84116

85-
86117
## Sample Data
118+
87119
- We've included a `MOCK_DATA.json` file containing 15 documents with various mocked user data. The `build` step will automatically load the sample data, but you may want to also load it manually for local testing. Use `npm run load-sample-data` to insert the documents to your database. Be sure your local environment variables are set correctly!
88-
- This file can also be [imported into Capella manually](https://docs.couchbase.com/cloud/clusters/data-service/import-data-documents.html).
120+
- This file can also be [imported into Capella manually](https://docs.couchbase.com/cloud/clusters/data-service/import-data-documents.html).
89121
- You can also add your own profile data to the database manually by clicking the **+** icon in the UI.
90122

91-
92123
## Notes About the Quickstart Code
124+
93125
- We've included a `.env.default` file which is used for testing and gitpod instances of the project to ensure smooth setup in these environments.
94126
- In the completed quickstart code, fetch URLs use a dynamic `origin` variable instead of hard coding `http://localhost:3000` to ensure requests work when running in other environments.
95127
- _**NOTE FOR CAPELLA DATABASES:**_ The database initialization code currently only works with local databases. If you are using Capella, you'll need to manually create a bucket called `user_profile` and then within that buckets default scope, a collection called `profile`. [See here for more info on managing buckets in Capella.](https://docs.couchbase.com/cloud/clusters/data-service/manage-buckets.html). After bucket and collection creation, you can use the index creation command: `npm run build-indexes`. Running `npm run init-db:local` will also work to create the required indices. The bucket and collection creation steps will fail with `ECONNREFUSED` but it will still be able to create the index on your Capella database.
96128

97-
98129
## Running The Tests
130+
99131
A suite of integration tests has been included, and can be run by first setting up the database:
132+
100133
```
101134
npm run init-db:default
102135
```
103-
and then using the `npm test` command.
104136

137+
and then using the `npm test` command.
105138

106139
## Try it in Your Browser
140+
107141
#### Run with GitPod
108-
[![Try it now!](https://da-demo-images.s3.amazonaws.com/runItNow_outline.png?couchbase-example=nextjs-quickstart-repo&source=github)](https://gitpod.io/#https://github.com/couchbase-examples/nextjs-quickstart)
109142

143+
[![Try it now!](https://da-demo-images.s3.amazonaws.com/runItNow_outline.png?couchbase-example=nextjs-quickstart-repo&source=github)](https://gitpod.io/#https://github.com/couchbase-examples/nextjs-quickstart)

0 commit comments

Comments
 (0)