From 6cb6ef3bed11423005733ccf76b3d49f980e13bf Mon Sep 17 00:00:00 2001 From: viral-sangani Date: Thu, 24 Oct 2024 17:25:50 +0530 Subject: [PATCH 1/3] Vercel instructions added --- README.md | 7 +-- docs/DEPLOYMENT_GUIDE.md | 95 ++++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/utils/constant.ts | 12 +++-- 4 files changed, 106 insertions(+), 9 deletions(-) create mode 100644 docs/DEPLOYMENT_GUIDE.md diff --git a/README.md b/README.md index 6346c82..b1c3a20 100644 --- a/README.md +++ b/README.md @@ -188,12 +188,9 @@ Checkout [minipay docs](https://docs.celo.org/developer/build-on-minipay/overvie Checkout [valora docs](https://docs.valora.xyz/) to learn more about it. -### Social Connect +## Continuous Deployment -- Template for building applications with social connectivity features. -- Supports various social login methods and user interactions. - -Checkout [social connect docs](https://github.com/celo-org/social-connect) to learn more about it. +For detailed instructions on deploying the Next.js app using Vercel CLI, refer to the [Deployment Guide](./DEPLOYMENT_GUIDE.md). diff --git a/docs/DEPLOYMENT_GUIDE.md b/docs/DEPLOYMENT_GUIDE.md new file mode 100644 index 0000000..ece465f --- /dev/null +++ b/docs/DEPLOYMENT_GUIDE.md @@ -0,0 +1,95 @@ +# Deployment Guide for Celo Composer React/Next App Using Vercel CLI + +This document provides step-by-step instructions for deploying your Next.js app to Vercel using the Vercel CLI. + +## Prerequisites + +1. **Node.js installed**: Ensure Node.js is installed on your system. + +## Step 1: Install Vercel CLI + +Install Vercel CLI globally using npm or pnpm: + +```bash +npm install -g vercel +# OR if using pnpm +pnpm add -g vercel +``` + +## Step 2: Login to Vercel + +Log in to your Vercel account: + +```bash +vercel login +``` + +Follow the on-screen instructions to authenticate your account. + +## Step 3: Goto React App + +Navigate to the root directory of your Next.js app: + +```bash +cd packages/react-app +``` + +## Step 4: Deploy the App + +To deploy your Celo Composer app using Vercel CLI, run: + +```bash +vercel +``` + +> [!NOTE] +> First-Time Deployment: +> +> - The CLI will ask several questions, including project scope, project name, and framework detection. +> +> Subsequent Deployments: +> +> - Run vercel to deploy the latest changes without additional configuration. + +## Step 5: View Deployment Status + +After deployment, you’ll receive a preview deployment URL: + +```bash +https://.vercel.app +``` + +> [!IMPORTANT] +> Important: This preview deployment is only accessible to the authenticated user (the Vercel account owner). To make your app publicly accessible, you need to deploy to production. + +## Step 6: Deploy to Production + +To make the app publicly accessible, deploy it to production: + +```bash +vercel deploy --prod +``` + +This command creates a production deployment accessible to everyone. + +## Step 8: Configure Environment Variables + +If your app uses environment variables, configure them in Vercel: + +1. Go to the Vercel Dashboard. +2. Select your project. +3. Go to Settings > Environment Variables. +4. Add variables for Development, Preview, and Production environments. + +Alternatively, use Vercel CLI: + +```bash +vercel env add +``` + +## Step 9: Update Deployment + +Whenever you make changes to your code, update the deployment: + +- Preview deployment: `vercel` +- Production deployment: `vercel --prod` diff --git a/package.json b/package.json index 744d1d7..4213994 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "type": "git", "url": "git+https://github.com/celo-org/celo-composer.git" }, + "private": true, "author": "celo", "license": "MIT", "bugs": { diff --git a/src/utils/constant.ts b/src/utils/constant.ts index 5c5103b..9d7fd36 100644 --- a/src/utils/constant.ts +++ b/src/utils/constant.ts @@ -90,11 +90,15 @@ export const displayInstructions = () => { console.log(chalk.yellow(" yarn dev\n")); console.log( - "If you prefer to use npm, you can run the following commands instead:\n" + chalk.green( + "For detailed instructions on deploying the project using Vercel CLI, please refer to the Deployment Guide:" + ) + ); + console.log( + chalk.blue( + " https://github.com/celo-org/celo-composer/blob/main/DEPLOYMENT_GUIDE.md\n" + ) ); - - console.log(chalk.yellow(" npm install")); - console.log(chalk.yellow(" npm run dev\n")); console.log( chalk.green("Thank you for using Celo Composer!") + From b6396caa723a273b6d7e9b79549ef7469f9dcbd1 Mon Sep 17 00:00:00 2001 From: GigaHierz Date: Fri, 25 Oct 2024 19:07:00 +0700 Subject: [PATCH 2/3] fix link to deployment file --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b1c3a20..4223864 100644 --- a/README.md +++ b/README.md @@ -190,7 +190,7 @@ Checkout [valora docs](https://docs.valora.xyz/) to learn more about it. ## Continuous Deployment -For detailed instructions on deploying the Next.js app using Vercel CLI, refer to the [Deployment Guide](./DEPLOYMENT_GUIDE.md). +For detailed instructions on deploying the Next.js app using Vercel CLI, refer to the [Deployment Guide](./docs/DEPLOYMENT_GUIDE.md). From 76e4b12813576595b05ec36e2ad2330ef2780103 Mon Sep 17 00:00:00 2001 From: GigaHierz Date: Fri, 25 Oct 2024 19:16:29 +0700 Subject: [PATCH 3/3] remove deleted template from template list --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4223864..331c38e 100644 --- a/README.md +++ b/README.md @@ -63,10 +63,11 @@ Celo Composer is built on Celo to make it simple to build dApps using a variety - [Celo](https://celo.org/) - [Solidity](https://docs.soliditylang.org/en/v0.8.19/) -- [Next.js](https://nextjs.org/) +- [Hardhat](https://hardhat.org/) - [React.js](https://reactjs.org/) +- [Next.js](https://nextjs.org/) - [viem](https://viem.sh/) -- [Hardhat](https://hardhat.org/) +- [Tailwind](https://tailwindcss.com/)

(back to top)

@@ -110,7 +111,6 @@ Do you want to use a template? ```text - Minipay - Valora -- Social Connect ``` - Step 6: Provide the Project Owner's Name: You will be asked to enter the project owner's name.