Getting App ready to deploy

remove hardcoded localhost

externalize it to

.env.local

DOMAIN="localhost"
PORT=3000

and use in code as:

Old:

const HOME_URL = "localhost:3000";

New:

const HOME_URL = `${process.env.DOMAIN}:${process.env.PORT}`;

Change also somewhere in Google OAuth… I gave somewhere in google auth setup, the localhost as callback URL.

Will update it with cloud url (production env. url, where I deploy)

Google it:

google oauth callback URL
googled google oauth setup
found a visited URL: Integrating Google Sign-In into your web app

Go to the Credentials page. - this should be my goto place.

Look for OAuth 2.0 Client IDs

Got it!

`Authorized redirect URIs` is what I was looking for!

edit: later saw I can add both localhost and PROD,
Also BTW, running locally the OAuth did not work because Credentials > Redirect URI in Google API Console did not have localhost anymore.
But Google lets you add multiple, so I did it and locally also OAuth works now:

I think app is ready tp deploy.

Only some cosmetic improvements - will do it later.

oh I forgot DB!

to store DB credentials, remove my custom solution - replace with .env

Google `nextjs deploy`

next build generates an optimized version of your application for production. This output is generated inside the .next folder: All JavaScript code inside .next has been compiled and browser bundles have been minified to help achieve the best performance and support all modern browsers.

All this on Nextjs documentation: https://nextjs.org/docs/deployment

Also if using Vercel, even the next build is run automatically be Vercel. Any changes - just git push and Vercel will redeploy.

I am trying to deploy to Vercel Now.

Deploying on Vercel

Go to vercel. Once logged in (signup if needed) you can add a GitHub account , or just few repos so Vercel can access them.

To add particular repo, I used again: (alreday have some repos connected to vercel, dont have all repos permission to Vercel, I do it when needed, on repo basis)

As soon as I click Import, the next screen lets me

select a Preset (auto fills after detecting this is Nextjs app)
define env variables if any. Yess

Got error

Failed to compile.
./pages/api/restricted.js
2:1  Warning: Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export
./components/home/NoteList.js
11:11  Error: Missing "key" prop for element in iterator  react/jsx-key
./components/modal/Modal.js
25:20  Error: 'StyledModalTitle' is not defined.  react/jsx-no-undef
info  - Need to disable some ESLint rules? Learn more here: https://nextjs.org/docs/basic-features/eslint#disabling-rules
Error: Command "npm run build" exited with 1

Then saw why it was working locally.

Locally tried to build - it also falied.

with same error:


Failed to compile.

./pages/api/restricted.js
2:1  Warning: Assign arrow function to a variable before exporting as module default  import/no-anonymous-default-export

./components/home/NoteList.js
11:11  Error: Missing "key" prop for element in iterator  react/jsx-key

./components/modal/Modal.js
25:20  Error: 'StyledModalTitle' is not defined.  react/jsx-no-undef

For the last error, googled styled-components, and guessed to import looking at https://styled-components.com/

import styled, { StyledModalTitle } from "styled-components"; in components\modal\Modal.js

npm run build Locally - worked, no longer the error: Error: ‘StyledModalTitle’ is not defined. But still deploy gave error that styled-components does not export StyledModalTitle

Next, tried to google, and found this: https://gist.github.com/tommymarshall/facbb6152e0a4fba0dab0f396ce89fb4. So accordingly added:

const StyledModalTitle = styled.h1`
    font-size: 20px;
`;

after this, vercel deploy did not face same error… (looks like passed that stage, because compiled successflly), but now goot new error

info  - Creating an optimized production build...
info  - Compiled successfully
info  - Collecting page data...
> Build error occurred
MongoServerSelectionError: connection <monitor> to 35.154.177.91:27017 closed
    at Timeout._onTimeout (/vercel/path0/node_modules/mongodb/lib/sdam/topology.js:305:38)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7) {
  type: 'MongoServerSelectionError',
  reason: {
    type: 'ReplicaSetNoPrimary',
    servers: {},
    stale: false,
    compatible: true,
    heartbeatFrequencyMS: 10000,
    setName: 'atlas-xs71cx-shard-0'
  }
}
Error: Command "npm run build" exited with 1

Maybe mongoDB does not allow vercel server/IP to connect.

googled how to mongodb allow connection from another server

but I wanted a quick fix, so decided to first try making db public access

Network Access: yes! this maybe I need to change.

allow access from anywhere

Got this error:

check the server logs so I found function logs in vercel on my project. Saw this.

[GET] /api/auth/providers
20:07:33:85
2022-06-12T14:37:33.969Z	72eb66ff-165c-4120-bf78-d8a999733425	ERROR	[next-auth][error][NO_SECRET] 
https://next-auth.js.org/errors#no_secret Please define a `secret` in production. MissingSecret [MissingSecretError]: Please define a `secret` in production.
    at assertConfig (/var/task/node_modules/next-auth/core/lib/assert.js:26:14)
    at NextAuthHandler (/var/task/node_modules/next-auth/core/index.js:34:52)
    at NextAuthNextHandler (/var/task/node_modules/next-auth/next/index.js:21:51)
    at /var/task/node_modules/next-auth/next/index.js:57:38
    at Object.apiResolver (/var/task/node_modules/next/dist/server/api-utils/node.js:185:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async NextNodeServer.runApi (/var/task/node_modules/next/dist/server/next-server.js:395:9)
    at async Object.fn (/var/task/node_modules/next/dist/server/base-server.js:496:37)
    at async Router.execute (/var/task/node_modules/next/dist/server/router.js:226:36)
    at async NextNodeServer.run (/var/task/node_modules/next/dist/server/base-server.js:606:29) {
  code: 'NO_SECRET'
}

Googled found this:

NO_SECRET In production, we expect you to define a secret property in your configuration. In development, this is shown as a warning for convenience. Read more

BTW since the redirect uri is not localhost (I changed it), locally running shows this error on trying to login with google

Googled the error and found: https://github.com/nextauthjs/next-auth/issues/3245

Add SECRET=“MY_STRONG_SECRET” to your .env
Replace MY_STRONG_SECRET with a strong secret generate by a tool like https://generate-secret.vercel.app/32
Add secret: process.env.SECRET, at the same level as the providers array to pages/api/auth/[...nextauth].js

Later also saw: in redirect URI, the https was missing, http gave same error. Updated https instead of http

Fixed this problem too:

Done!

Finally the app is deployed and working!!

Getting App ready to deploy#

Change also somewhere in Google OAuth… I gave somewhere in google auth setup, the localhost as callback URL.#

Authorized redirect URIs is what I was looking for!#

I think app is ready tp deploy.#

Google nextjs deploy#

Deploying on Vercel#