Deploying
Lets go live
Deploying our app is easy. We're going to use Vercel to deploy our app, but like I said before, there are more platforms adding support for this fullstack framework. I encourage you to checkout Netlify as well.
Before we deploy, we have some work to do. First, you have to create a new Github oauth app because github only allows one host url per oauth app. We'll get the URL for the Auth redirect callback after we deploy, so just put localhost in there for now. But get the ID and Secret.
If you haven't created a DB on atlas you will have to now. Make sure to allow all IP addresses, and I recommed creating a new DB user and password just for vercel. Note, vercel does has a marketplace where they can provision this for you on atlas, but we're doing it old school 😎.
The simplest way to deploy to vercel is with their github integration, however, we're going to use their CLI. Create an account and then install their CLI or use npx
yarn global add vercel
npm i -g vercel
Now, login with
vercel login
Then finally, deploy with
vercel --prod
```.
This will attempt to deploy a prod version of your app.
This will walk you through some prompts. Just create a new project and don't override the suggestions. Vercel will detect our Next.js app. Now we need to add some envs to our vercel app. Deployment might fail unless we do, but the app will now be created in the vercel dashboard. Go there, and then into settings to add the environment variables.
```bash
// production only
NEXTAUTH_URL=url of your prod deployment on vercel
NEXT_PUBLIC_NEXTAUTH_URL= same as above
// prevew and local only
NEXT_PUBLIC_NEXTAUTH_URL= set this to the system env var VERCEL_URL
NEXTAUTH_URL= same as above
// all envs
DATABASE_URL= you atlas db url
GITHUB_SECRET= your new GH oauth app secret
GITHUB_ID = your ne GH oauth app ID
JWT_SECRET=anything you want
If youre deployment failed, run it again with vercel
. Once it deploys this time, lets make a production deploy with
vercel --prod
This will deploy a prod version of your app. The URL to your prod deploy which should now be in your terminal, copied to your clipboard, and visibile on your dashboard, is need for your new github oauth app. Lets update its Authorization Callback URL with {your-prod-url}//api/auth/callback/github
.
You shuold now be able to use Known in prod! Congrats, we did it 🎉