Frontend Serverless with React and GraphQL

Create a git repository for your current project:

1. Go to https://github.com and create a new repository. I'd recommend making it private but there is nothing special about this code so if you want to share it with the world, especially if you are doing this for educational purposes, feel free to make it public.
2. Github will tell you that you can push an existing repository to this new project by running the following making sure to substitute your account and project with your actual details:

git remote add origin https://github.com/your-account/your-project
git push -u origin master

3. You'll want to commit your code and run a second push if you haven't done that already. If you are working on your staging branch like I am here, you'll also want to git push -u origin staging as well.

Next, go to https://vercel.com and create a new account using your Github account where you have this current project. We are going to need to do a few steps to link up your repo with a new deployment.

1. Click the "import project" button.
2. Select "from git repository" option.
3. Click the "install Vercel for GitHub" button and make sure to link "all repositories" in the confirmation.
4. If you are currently working off your staging branch and your master branch doesn't have a valid next chop commit yet, we are going to have to change our default branch in GitHub to staging to allow Vercel to see it. You can do this in GitHub by going to settings -> branches -> default branch and setting it to staging.
5. Back over in Vercel, continue the import project and select your particular repo in GitHub that you just selected.
6. Leave the root directory alone as well as the build commands- they should all work if it properly detected that it is a Next.js project.
7. Your project should then show up as being "queued" for deployment and if you wait a bit it will eventually build.

Once deployed, go to the home page and you should be greeted with this error: "Unexpected token < in JSON... ". The reason why we are seeing this is that we haven't entered any of our environmental variables yet so it doesn't know which backend to connect to.

Click on the project settings -> general -> environmental variables. Start adding all of the environmental variables from your .env into this panel, one by one.

Once you get back to the main page for your project in Vercel, we will need to manually trigger a build. Normally this process is automatic when new code changes come through but since we didn't change any code, only added secrets, we will need to do this manually.

1. Click on the link under the "deployment" which shows your latest deployed site.
2. Click on the button with the 3 dots next to the black "visit button".
3. Select "redeploy" as an option and accept all confirmation boxes.

Now it should redeploy your site and the home page should load just like it does locally. Sweet! As we continue through each step, feel free to make commits and push them to this branch. You should see that each new version gets built and deployed automatically. Not only that, you'll have access to older versions as well so you can always revert back or test one version against another.

One final step that you may want to do is add the .vercel folder to our .gitignore file. Vercel also supports manually pushing deployments from your computer and although we won't use this particular method of deployment in this course, you should add that ignore line so that if you happen to use it in the future, you won't accidentally commit hundreds of build files to your git repo.