Add new import flow to CMS examples (vercel#14053)

[ch2502] - Added new import flow to every CMS example, using the deploy button, and removed `vercel.json` - Replaced `dotenv` with the new env support in outdated examples
MLH-Fellowship · Jun 12, 2020 · e821317 · e821317
1 parent c290eb8
commit e821317
Show file tree

Hide file tree

Showing 79 changed files with 338 additions and 654 deletions.
diff --git a/examples/blog-starter-typescript/README.md b/examples/blog-starter-typescript/README.md
@@ -10,6 +10,12 @@ To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) a
 
 ## How to use
 
+## Deploy your own
+
+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/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/blog-starter-typescript)
+
 ### Using `create-next-app`
 
 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:

diff --git a/examples/blog-starter-typescript/package.json b/examples/blog-starter-typescript/package.json
@@ -24,7 +24,6 @@
     "@types/node": "^14.0.1",
     "@types/react": "^16.9.35",
     "@types/react-dom": "^16.9.8",
-    "dotenv": "8.2.0",
     "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^1.4.0"
   }

diff --git a/examples/blog-starter/README.md b/examples/blog-starter/README.md
@@ -10,6 +10,12 @@ To create the blog posts we use [`remark`](https://github.com/remarkjs/remark) a
 
 [https://next-blog-starter.now.sh/](https://next-blog-starter.now.sh/)
 
+## Deploy your own
+
+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/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/blog-starter)
+
 ### Related examples
 
 - [WordPress](/examples/cms-wordpress)

diff --git a/examples/blog-starter/package.json b/examples/blog-starter/package.json
@@ -17,7 +17,6 @@
     "remark-html": "10.0.0"
   },
   "devDependencies": {
-    "dotenv": "8.2.0",
     "postcss-preset-env": "^6.7.0",
     "tailwindcss": "^1.4.0"
   }

diff --git a/examples/cms-agilitycms/.env.local.example b/examples/cms-agilitycms/.env.local.example
@@ -1,4 +1,4 @@
-NEXT_EXAMPLE_CMS_AGILITY_GUID=
-NEXT_EXAMPLE_CMS_AGILITY_API_FETCH_KEY=
-NEXT_EXAMPLE_CMS_AGILITY_API_PREVIEW_KEY=
-NEXT_EXAMPLE_CMS_AGILITY_SECURITY_KEY=
+AGILITY_CMS_GUID=
+AGILITY_CMS_API_FETCH_KEY=
+AGILITY_CMS_API_PREVIEW_KEY=
+AGILITY_CMS_SECURITY_KEY=
diff --git a/examples/cms-agilitycms/README.md b/examples/cms-agilitycms/README.md
@@ -9,6 +9,12 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 - **Live**: [https://next-blog-agilitycms.now.sh/](https://next-blog-agilitycms.now.sh/)
 - **Preview Mode**: [https://next-blog-agilitycms.now.sh/?agilitypreviewkey=...](https://next-blog-agilitycms.now.sh/?agilitypreviewkey=GzL%2fio1pLkfKc9BR1%2fC1cDQeKjL0AkwrTAJ22q3UEjAcOhyrqZejDkDv4kMlBKqrEuQxsuRyiP%2bUaykDYlJ%2fJg%3d%3d)
 
+## Deploy your own
+
+Once you have access to [the environment variables you'll need](#step-15-set-up-environment-variables), 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/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms&env=AGILITY_CMS_GUID,AGILITY_CMS_API_FETCH_KEY,AGILITY_CMS_API_PREVIEW_KEY,AGILITY_CMS_SECURITY_KEY&envDescription=API%20Keys%20required%20by%20Agility%20CMS.%20More%20details%20on%20https://vercel.link/agility-cms-env)
+
 ### Related examples
 
 - [WordPress](/examples/cms-wordpress)
@@ -263,18 +269,18 @@ Go to the **Getting Started** section from the menu and click on **API Keys**. Y
 
 Then set each variable on `.env.local`:
 
-- `NEXT_EXAMPLE_CMS_AGILITY_GUID` should be the **Instance GUID** field
-- `NEXT_EXAMPLE_CMS_AGILITY_API_FETCH_KEY` should be the **Live API Key** field
-- `NEXT_EXAMPLE_CMS_AGILITY_API_PREVIEW_KEY` should be the **Preview API Key** field - this is used when the site is in [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) and allows your site to pull the latest content, regardless of whether it is published or not.
-- `NEXT_EXAMPLE_CMS_AGILITY_SECURITY_KEY` should be the **Security Key** field that can be found in **Settings** > **Global Security** - this is used to communicate between the CMS and your site to validate [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)
+- `AGILITY_CMS_GUID` should be the **Instance GUID** field
+- `AGILITY_CMS_API_FETCH_KEY` should be the **Live API Key** field
+- `AGILITY_CMS_API_PREVIEW_KEY` should be the **Preview API Key** field - this is used when the site is in [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode) and allows your site to pull the latest content, regardless of whether it is published or not.
+- `AGILITY_CMS_SECURITY_KEY` should be the **Security Key** field that can be found in **Settings** > **Global Security** - this is used to communicate between the CMS and your site to validate [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode)
 
 Your `.env.local` file should look like this:
 
 ```bash
-NEXT_EXAMPLE_CMS_AGILITY_GUID=...
-NEXT_EXAMPLE_CMS_AGILITY_API_FETCH_KEY=...
-NEXT_EXAMPLE_CMS_AGILITY_API_PREVIEW_KEY=...
-NEXT_EXAMPLE_CMS_AGILITY_SECURITY_KEY=...
+AGILITY_CMS_GUID=...
+AGILITY_CMS_API_FETCH_KEY=...
+AGILITY_CMS_API_PREVIEW_KEY=...
+AGILITY_CMS_SECURITY_KEY=...
 ```
 
 ### Step 16. Run Next.js in development mode
@@ -293,20 +299,19 @@ Your blog should be up and running on [http://localhost:3000](http://localhost:3
 
 ### Step 17. Deploy on Vercel
 
-You can deploy this app to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+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)).
 
-To deploy on Vercel, you need to set the environment variables using the [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/now-cli#commands/secrets)).
+#### Deploy Your Local Project
 
-Install [Vercel CLI](https://vercel.com/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace each variable with the corresponding strings in `.env.local`:
+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).
 
-```
-vercel secrets add next_example_cms_agility_guid <NEXT_EXAMPLE_CMS_AGILITY_GUID>
-vercel secrets add next_example_cms_agility_api_fetch_key <NEXT_EXAMPLE_CMS_AGILITY_API_FETCH_KEY>
-vercel secrets add next_example_cms_agility_api_preview_key <NEXT_EXAMPLE_CMS_AGILITY_API_PREVIEW_KEY>
-vercel secrets add next_example_cms_agility_security_key <NEXT_EXAMPLE_CMS_AGILITY_SECURITY_KEY>
-```
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
-Then push the project to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy.
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/cms-agilitycms&env=AGILITY_CMS_GUID,AGILITY_CMS_API_FETCH_KEY,AGILITY_CMS_API_PREVIEW_KEY,AGILITY_CMS_SECURITY_KEY&envDescription=API%20Keys%20required%20by%20Agility%20CMS.%20More%20details%20on%20https://vercel.link/agility-cms-env)
 
 ### Step 18. Try preview mode
 

diff --git a/examples/cms-agilitycms/lib/api.js b/examples/cms-agilitycms/lib/api.js
@@ -7,14 +7,14 @@ import { requireComponentDependancyByName } from './dependancies'
 
 // Our LIVE API client
 const liveClient = agility.getApi({
-  guid: process.env.NEXT_EXAMPLE_CMS_AGILITY_GUID,
-  apiKey: process.env.NEXT_EXAMPLE_CMS_AGILITY_API_FETCH_KEY,
+  guid: process.env.AGILITY_CMS_GUID,
+  apiKey: process.env.AGILITY_CMS_API_FETCH_KEY,
 })
 
 // Our PREVIEW API client
 const previewClient = agility.getApi({
-  guid: process.env.NEXT_EXAMPLE_CMS_AGILITY_GUID,
-  apiKey: process.env.NEXT_EXAMPLE_CMS_AGILITY_API_PREVIEW_KEY,
+  guid: process.env.AGILITY_CMS_GUID,
+  apiKey: process.env.AGILITY_CMS_API_PREVIEW_KEY,
   isPreview: true,
 })
 

diff --git a/examples/cms-agilitycms/lib/preview.js b/examples/cms-agilitycms/lib/preview.js
@@ -98,7 +98,7 @@ export async function validateSlugForPreview({ slug, contentID }) {
 //Generates a preview key to compare agains
 export function generatePreviewKey() {
   //the string we want to encode
-  const str = `-1_${process.env.NEXT_EXAMPLE_CMS_AGILITY_SECURITY_KEY}_Preview`
+  const str = `-1_${process.env.AGILITY_CMS_SECURITY_KEY}_Preview`
 
   //build our byte array
   let data = []

diff --git a/examples/cms-agilitycms/vercel.json b/examples/cms-agilitycms/vercel.json
diff --git a/examples/cms-buttercms/.env.local.example b/examples/cms-buttercms/.env.local.example
@@ -1,3 +1,3 @@
 # Copy this file as .env.local
-NEXT_EXAMPLE_CMS_BUTTERCMS_API_KEY=
-NEXT_EXAMPLE_CMS_BUTTERCMS_PREVIEW_SECRET=
+BUTTERCMS_API_KEY=
+BUTTERCMS_PREVIEW_SECRET=
diff --git a/examples/cms-buttercms/README.md b/examples/cms-buttercms/README.md
@@ -6,6 +6,12 @@ This example showcases Next.js's [Static Generation](https://nextjs.org/docs/bas
 
 [https://next-blog-buttercms.now.sh/](https://next-blog-buttercms.now.sh/)
 
+## Deploy your own
+
+Once you have access to [the environment variables you'll need](#step-2-set-up-environment-variables), 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/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms&env=BUTTERCMS_API_KEY,BUTTERCMS_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ButterCMS.%20More%20details%20on%20https://vercel.link/buttercms-env)
+
 ### Related examples
 
 - [WordPress](/examples/cms-wordpress)
@@ -59,8 +65,8 @@ cp .env.local.example .env.local
 
 Then set each variable on `.env.local`:
 
-- `NEXT_EXAMPLE_CMS_BUTTERCMS_API_KEY` should be set as the API key.
-- `NEXT_EXAMPLE_CMS_BUTTERCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
+- `BUTTERCMS_API_KEY` should be set as the API key.
+- `BUTTERCMS_PREVIEW_SECRET` can be any random string (but avoid spaces), like `MY_SECRET` - this is used for [Preview Mode](https://nextjs.org/docs/advanced-features/preview-mode).
 
 ### Step 3. Run Next.js in development mode
 
@@ -96,23 +102,24 @@ To enable the Preview Mode, go to this URL:
 http://localhost:3000/api/preview?secret=<secret>&slug=draft-post-test
 ```
 
-- `<secret>` should be the string you entered for `NEXT_EXAMPLE_CMS_BUTTERCMS_PREVIEW_SECRET`.
+- `<secret>` should be the string you entered for `BUTTERCMS_PREVIEW_SECRET`.
 
 You should now be able to see the draft post. To exit the preview mode, you can click **Click here to exit preview mode** at the top.
 
 **Tip**: [You can set the preview URL on ButterCMS](https://buttercms.com/kb/preview-urls).
 
 ### Step 5. Deploy on Vercel
 
-You can deploy this app to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
+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)).
 
-To deploy on Vercel, you need to set the environment variables with **Vercel Secrets** using [Vercel CLI](https://vercel.com/download) ([Documentation](https://vercel.com/docs/vercel-cli#commands/secrets)).
+#### Deploy Your Local Project
 
-Install [Vercel CLI](https://vercel.com/download), log in to your account from the CLI, and run the following commands to add the environment variables. Replace `<NEXT_EXAMPLE_CMS_BUTTERCMS_API_KEY>` and `<NEXT_EXAMPLE_CMS_BUTTERCMS_PREVIEW_SECRET>` with the corresponding strings in `.env`.
+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).
 
-```
-vercel secrets add next_example_cms_buttercms_api_key <NEXT_EXAMPLE_CMS_BUTTERCMS_API_KEY>
-vercel secrets add next_example_cms_buttercms_preview_secret <NEXT_EXAMPLE_CMS_BUTTERCMS_PREVIEW_SECRET>
-```
+**Important**: When you import your project on Vercel, make sure to click on **Environment Variables** and set them to match your `.env.local` file.
+
+#### Deploy from Our Template
+
+Alternatively, you can deploy using our template by clicking on the Deploy button below.
 
-Then push the project to GitHub/GitLab/Bitbucket and [import to Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) to deploy.
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/git?s=https://github.com/vercel/next.js/tree/canary/examples/cms-buttercms&env=BUTTERCMS_API_KEY,BUTTERCMS_PREVIEW_SECRET&envDescription=Required%20to%20connect%20the%20app%20with%20ButterCMS.%20More%20details%20on%20https://vercel.link/buttercms-env)
diff --git a/examples/cms-buttercms/lib/api.js b/examples/cms-buttercms/lib/api.js
@@ -1,5 +1,5 @@
 import Butter from 'buttercms'
-const butter = Butter(process.env.NEXT_EXAMPLE_CMS_BUTTERCMS_API_KEY)
+const butter = Butter(process.env.BUTTERCMS_API_KEY)
 
 export async function getPreviewPostBySlug(slug) {
   const postResponse = await butter.post.retrieve(slug, {

diff --git a/examples/cms-buttercms/pages/api/preview.js b/examples/cms-buttercms/pages/api/preview.js
@@ -4,8 +4,7 @@ export default async function preview(req, res) {
   // Check the secret and next parameters
   // This secret should only be known to this API route and the CMS
   if (
-    req.query.secret !==
-      process.env.NEXT_EXAMPLE_CMS_BUTTERCMS_PREVIEW_SECRET ||
+    req.query.secret !== process.env.BUTTERCMS_PREVIEW_SECRET ||
     !req.query.slug
   ) {
     return res.status(401).json({ message: 'Invalid token' })

diff --git a/examples/cms-buttercms/vercel.json b/examples/cms-buttercms/vercel.json
diff --git a/examples/cms-contentful/.env.example b/examples/cms-contentful/.env.example
diff --git a/examples/cms-contentful/.env.local.example b/examples/cms-contentful/.env.local.example
@@ -0,0 +1,4 @@
+CONTENTFUL_SPACE_ID=
+CONTENTFUL_ACCESS_TOKEN=
+CONTENTFUL_PREVIEW_ACCESS_TOKEN=
+CONTENTFUL_PREVIEW_SECRET=
diff --git a/examples/cms-contentful/.gitignore b/examples/cms-contentful/.gitignore