1"use strict";(self.webpackChunkQuiz_Doc=self.webpackChunkQuiz_Doc||[]).push([[1863],{5908:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/github1-07cdd742347dde3a249f037e84ee0079.png"},11023:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/github2-db8750287d3333f5451a1c65adf32868.png"},18796:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel1-620b1505a1c7e8748052abd2dbdd72c3.png"},28453:(e,n,t)=>{t.d(n,{R:()=>r,x:()=>c});var i=t(96540);const s={},l=i.createContext(s);function r(e){const n=i.useContext(l);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(s):e.components||s:r(e.components),i.createElement(l.Provider,{value:n},e.children)}},38257:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel4-171aacd109ad764963c956e37516f06f.png"},54968:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>d,contentTitle:()=>c,default:()=>h,frontMatter:()=>r,metadata:()=>i,toc:()=>o});const i=JSON.parse('{"id":"installation-guide/server-setup/vercel","title":"vercel","description":"Quizix is a modern application where the frontend (client) is built using Next.js and Tailwind CSS, and the backend is developed using Laravel.","source":"@site/docs/installation-guide/server-setup/vercel.md","sourceDirName":"installation-guide/server-setup","slug":"/installation-guide/server-setup/vercel","permalink":"/installation-guide/server-setup/vercel","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":3,"frontMatter":{"sidebar_position":3},"sidebar":"tutorialSidebar","previous":{"title":"static-export","permalink":"/installation-guide/server-setup/cPanel/Client/static-export"},"next":{"title":"VPS","permalink":"/category/vps"}}');var s=t(74848),l=t(28453);const r={sidebar_position:3},c="\ud83d\ude80 Guide to Install Our Quizix Client on Vercel",d={},o=[{value:"\ud83d\udcc1 Project Structure",id:"-project-structure",level:2},{value:"\u2699\ufe0f Prerequisites",id:"\ufe0f-prerequisites",level:2},{value:"\ud83d\udd27 Installation Methods",id:"-installation-methods",level:2},{value:"1. \ud83d\ude80 Deploy Using Vercel CLI",id:"1--deploy-using-vercel-cli",level:3},{value:"\u2705 Step 1: Extract and Navigate",id:"-step-1-extract-and-navigate",level:4},{value:"\u2705 Step 2: Install Dependencies",id:"-step-2-install-dependencies",level:4},{value:"\u2705 Step 3: Build the Project",id:"-step-3-build-the-project",level:4},{value:"\u2705 Step 4: Edit <code>vercel.json</code>",id:"-step-4-edit-verceljson",level:4},{value:"\u2705 Step 5: Deploy to Vercel",id:"-step-5-deploy-to-vercel",level:4},{value:"2. \ud83d\ude80 Deploy Using GitHub",id:"2--deploy-using-github",level:3},{value:"\u2705 Step 1: Extract and Navigate",id:"-step-1-extract-and-navigate-1",level:4},{value:"\u2705 Step 2: Install Dependencies",id:"-step-2-install-dependencies-1",level:4},{value:"\u2705 Step 3: Create a GitHub Repository",id:"-step-3-create-a-github-repository",level:4},{value:"\u2705 Step 4: Initialize Git",id:"-step-4-initialize-git",level:4},{value:"\u2705 Step 5: Add and Commit Files",id:"-step-5-add-and-commit-files",level:4},{value:"\u2705 Step 6: Add Remote Repository URL <code>Copy from the repository URL</code>",id:"-step-6-add-remote-repository-url-copy-from-the-repository-url",level:4},{value:"\u2705 Step 7: Push to GitHub",id:"-step-7-push-to-github",level:4},{value:"\u2705 Step 9: Connect to vercel",id:"-step-9-connect-to-vercel",level:4},{value:"How to setup environment variables.",id:"how-to-setup-environment-variables",level:3},{value:"How to setup domain.",id:"how-to-setup-domain",level:3}];function a(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",h4:"h4",header:"header",hr:"hr",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...(0,l.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"-guide-to-install-our-quizix-client-on-vercel",children:"\ud83d\ude80 Guide to Install Our Quizix Client on Vercel"})}),"\n",(0,s.jsxs)(n.p,{children:["Quizix is a modern application where the ",(0,s.jsx)(n.strong,{children:"frontend (client)"})," is built using ",(0,s.jsx)(n.strong,{children:"Next.js"})," and ",(0,s.jsx)(n.strong,{children:"Tailwind CSS"}),", and the ",(0,s.jsx)(n.strong,{children:"backend"})," is developed using ",(0,s.jsx)(n.strong,{children:"Laravel"}),"."]}),"\n",(0,s.jsxs)(n.p,{children:["In this guide, we will focus on deploying only the ",(0,s.jsx)(n.strong,{children:"client part"})," on ",(0,s.jsx)(n.strong,{children:"Vercel"}),". The backend should be hosted separately on platforms like ",(0,s.jsx)(n.strong,{children:"AWS"}),", ",(0,s.jsx)(n.strong,{children:"DigitalOcean"}),", ",(0,s.jsx)(n.strong,{children:"Azure"}),", ",(0,s.jsx)(n.strong,{children:"VPS"})," or ",(0,s.jsx)(n.strong,{children:"cPanel"}),"."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"-project-structure",children:"\ud83d\udcc1 Project Structure"}),"\n",(0,s.jsxs)(n.p,{children:["The ",(0,s.jsx)(n.code,{children:"client.zip"})," file contains the frontend source code for Quizix. Extract this file before beginning the deployment process."]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"\ufe0f-prerequisites",children:"\u2699\ufe0f Prerequisites"}),"\n",(0,s.jsx)(n.p,{children:"Make sure you have the following installed:"}),"\n",(0,s.jsxs)(n.ul,{children:["\n",(0,s.jsx)(n.li,{children:"Node.js (v18 or later recommended)"}),"\n",(0,s.jsx)(n.li,{children:"npm"}),"\n",(0,s.jsx)(n.li,{children:"Git (for GitHub method)"}),"\n",(0,s.jsxs)(n.li,{children:["Vercel account (",(0,s.jsx)(n.a,{href:"https://vercel.com",children:"https://vercel.com"}),")"]}),"\n",(0,s.jsx)(n.li,{children:"Vercel CLI (for CLI method)"}),"\n"]}),"\n",(0,s.jsx)(n.hr,{}),"\n",(0,s.jsx)(n.h2,{id:"-installation-methods",children:"\ud83d\udd27 Installation Methods"}),"\n",(0,s.jsx)(n.p,{children:"You can deploy the Quizix client on Vercel using two methods:"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Using the Vercel CLI"}),"\n",(0,s.jsx)(n.li,{children:"Using the GitHub integration"}),"\n"]}),"\n",(0,s.jsx)(n.h3,{id:"1--deploy-using-vercel-cli",children:"1. \ud83d\ude80 Deploy Using Vercel CLI"}),"\n",(0,s.jsx)(n.p,{children:"Follow the steps below:"}),"\n",(0,s.jsx)(n.h4,{id:"-step-1-extract-and-navigate",children:"\u2705 Step 1: Extract and Navigate"}),"\n",(0,s.jsxs)(n.p,{children:["Extract the ",(0,s.jsx)(n.code,{children:"standalone-client.zip"})," file and open the terminal in that directory."]}),"\n",(0,s.jsx)(n.h4,{id:"-step-2-install-dependencies",children:"\u2705 Step 2: Install Dependencies"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install --force\n"})}),"\n",(0,s.jsx)(n.h4,{id:"-step-3-build-the-project",children:"\u2705 Step 3: Build the Project"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm run build\n"})}),"\n",(0,s.jsxs)(n.h4,{id:"-step-4-edit-verceljson",children:["\u2705 Step 4: Edit ",(0,s.jsx)(n.code,{children:"vercel.json"})]}),"\n",(0,s.jsxs)(n.p,{children:["Open the ",(0,s.jsx)(n.code,{children:"vercel.json"})," file and update the ",(0,s.jsx)(n.code,{children:"name"})," and ",(0,s.jsx)(n.code,{children:"framework"})," fields:"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-json",children:'{\n "env": {\n "NEXT_PUBLIC_API_BASE_URL": "https://app.quiz.com",\n "NEXT_PUBLIC_BASE_URL": "https://quiz.com",\n "NEXT_PUBLIC_TOKEN_NAME": "007-g5"\n },\n "build": {\n "env": {\n "NEXT_PUBLIC_API_BASE_URL": "https://app.quiz.com",\n "NEXT_PUBLIC_BASE_URL": "https://quiz.com",\n "NEXT_PUBLIC_TOKEN_NAME": "007-g5"\n }\n }\n}\n'})}),"\n",(0,s.jsx)(n.h4,{id:"-step-5-deploy-to-vercel",children:"\u2705 Step 5: Deploy to Vercel"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"vercel login\n"})}),"\n",(0,s.jsx)(n.p,{children:"After logging in, run the following command to deploy the project:"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"vercel deploy\n"})}),"\n",(0,s.jsx)(n.h3,{id:"2--deploy-using-github",children:"2. \ud83d\ude80 Deploy Using GitHub"}),"\n",(0,s.jsx)(n.p,{children:"Follow the steps below:"}),"\n",(0,s.jsx)(n.h4,{id:"-step-1-extract-and-navigate-1",children:"\u2705 Step 1: Extract and Navigate"}),"\n",(0,s.jsxs)(n.p,{children:["Extract the ",(0,s.jsx)(n.code,{children:"client.zip"})," file and open the terminal in that directory."]}),"\n",(0,s.jsx)(n.h4,{id:"-step-2-install-dependencies-1",children:"\u2705 Step 2: Install Dependencies"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"npm install --force\n"})}),"\n",(0,s.jsx)(n.h4,{id:"-step-3-create-a-github-repository",children:"\u2705 Step 3: Create a GitHub Repository"}),"\n",(0,s.jsxs)(n.p,{children:["Go to GitHub and create a new repository.\n",(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(5908).A+"",width:"1913",height:"301"})]}),"\n",(0,s.jsxs)(n.p,{children:['Enter a name for the repository and click "Create Repository".\n',(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(11023).A+"",width:"706",height:"695"})]}),"\n",(0,s.jsx)(n.p,{children:"Now you will see a new repository in your GitHub account and copy the repository URL."}),"\n",(0,s.jsx)(n.h4,{id:"-step-4-initialize-git",children:"\u2705 Step 4: Initialize Git"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"git init\n"})}),"\n",(0,s.jsx)(n.h4,{id:"-step-5-add-and-commit-files",children:"\u2705 Step 5: Add and Commit Files"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:'git add .\ngit commit -m "Initial commit"\n'})}),"\n",(0,s.jsxs)(n.h4,{id:"-step-6-add-remote-repository-url-copy-from-the-repository-url",children:["\u2705 Step 6: Add Remote Repository URL ",(0,s.jsx)(n.code,{children:"Copy from the repository URL"})]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"git remote add origin https://github.com/username/quizix.git\n"})}),"\n",(0,s.jsx)(n.h4,{id:"-step-7-push-to-github",children:"\u2705 Step 7: Push to GitHub"}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:"git push -u origin main\n"})}),"\n",(0,s.jsx)(n.h4,{id:"-step-9-connect-to-vercel",children:"\u2705 Step 9: Connect to vercel"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Login to Vercel and create a new project."}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(18796).A+"",width:"1827",height:"646"})}),"\n",(0,s.jsxs)(n.ol,{start:"2",children:["\n",(0,s.jsx)(n.li,{children:"Connect the GitHub repository to Vercel."}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(69479).A+"",width:"1304",he
1ight:"694"})}),"\n",(0,s.jsxs)(n.ol,{start:"3",children:["\n",(0,s.jsx)(n.li,{children:"Deploy the project."}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(93694).A+"",width:"656",height:"679"})}),"\n",(0,s.jsxs)(n.ol,{start:"4",children:["\n",(0,s.jsx)(n.li,{children:"As you can see the project is deploying."}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(38257).A+"",width:"803",height:"616"})}),"\n",(0,s.jsx)(n.h3,{id:"how-to-setup-environment-variables",children:"How to setup environment variables."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Go to the project settings."}),"\n",(0,s.jsx)(n.li,{children:'Click on "Environment Variables"'}),"\n"]}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{className:"language-bash",children:' "NEXT_PUBLIC_API_BASE_URL": "https://app.quiz.com",\n "NEXT_PUBLIC_BASE_URL": "https://quiz.com",\n "NEXT_PUBLIC_TOKEN_NAME": "007-g5"\n'})}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(89864).A+"",width:"1896",height:"838"})}),"\n",(0,s.jsx)(n.h3,{id:"how-to-setup-domain",children:"How to setup domain."}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsx)(n.li,{children:"Go to the project settings."}),"\n",(0,s.jsx)(n.li,{children:'Click on "Domains"'}),"\n"]}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(68195).A+"",width:"1883",height:"713"})}),"\n",(0,s.jsx)(n.p,{children:"Enter your domain name."}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"cpanelUpload1",src:t(62010).A+"",width:"548",height:"571"})}),"\n",(0,s.jsx)(n.p,{children:"If all the steps are successful then your project is deployed successfully. and you can access your project from your domain name."})]})}function h(e={}){const{wrapper:n}={...(0,l.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(a,{...e})}):a(e)}},62010:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel7-e2c28b1ea5b9d63bf3f07b75d5dc6449.png"},68195:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel6-774e259325d16a2f89ca27848a89eada.png"},69479:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel2-b0b5a70656be19d90b260357d966436a.png"},89864:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel5-970d6b0022cc0cb1dc301e603fc84068.png"},93694:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/vercel3-5b21e6f306b1216c18702f2fffd9e38c.png"}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.