fauzialz / amifauzi.com-open

I built this website for my personal wedding using Remix and Google Sheets API
https://www.amifauzi.com/?to=Rekan+Developer
47 stars 17 forks source link

Application Error when run with nodejs v14.21.3 #3

Open duynguyen33 opened 1 year ago

duynguyen33 commented 1 year ago

Hello @fauzialz,

I have seen the web of you and it's so great. I can try deploying on the same web but it shows the error as below.

Application Error

removeChild@[native code] @http://localhost:3000/build/routes/_index-I62DDOAQ.js:2255:32 safelyCallDestroy@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:16755:20 commitHookEffectListUnmount@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:16882:36 commitPassiveUnmountInsideDeletedTreeOnFiber@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:18300:44 commitPassiveUnmountEffectsInsideOfDeletedTree_begin@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:18259:57 commitPassiveUnmountEffects_begin@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:18195:71 commitPassiveUnmountEffects@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:18183:44 flushPassiveEffectsImpl@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19503:38 flushPassiveEffects@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19461:45 commitRootImpl@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19430:32 commitRoot@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19291:27 performSyncWorkOnRoot@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:18909:21 performSyncWorkOnRoot@[native code] flushSyncCallbacks@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:9153:38 flushPassiveEffectsImpl@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19520:29 flushPassiveEffects@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19461:45 @http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:19342:36 workLoop@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:205:50 flushWork@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:184:30 performWorkUntilDeadline@http://localhost:3000/build/_shared/chunk-HWTAJ4ZM.js:392:50

Can you tell me how to fix it? Thank you so much

fauzialz commented 1 year ago

Hello @duynguyen33, you should provide the required environment variables. Sorry, I forgot to mention this requirement in the development guidelines. I will make sure to include more tutorials next time.

In the root folder, you will find a file called .env.example. Follow the pattern in that file to create a file named .env and provide all the necessary variables. Here is the correct example:

GOOGLE_PROJECTID=YOUR GOOGLE GOOGLE_PROJECTID       example: amplified-way-222222
GOOGLE_CLIENT_EMAIL=YOUR GOOGLE CLIENT EMAIL        example: mywebsite-dev@amplified-way-222222.iam.gserviceaccount.com
GOOGLE_PRIVATE_KEY=YOUR GOOGLE PRIVATE KEY          example: {"privateKey":"-----BEGIN PRIVATE KEY-----\00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\nih5YoQf0NitnfDCMeaGfBts9DzVjiyyZZ7ioVWpz631YJXjNfPjoCYYg/UVvZSCi\nK4OJXHCqOG9c395G76Fyq0fzGFNE7e8x8MHyUQVJeXUNSgEwWugu9yRiNejCyhRs\nDYZu1wpiVLu+FBewBCCfCCdwwClnRqb4X02LMtdtPZU1zl5CRYV/tsp6snKk3K8L\nUd0tN2HrV6cVTERhZc8hRHnuQUTSYsZ0mP5SC/m2EXgbfYrF1oRgBfEDPH+j3uWc\n+Di1gEfp4SbPI4tc14xdHgWr0qkTU2AtThxns08wAQKBgQD9Equb6VEUapdcVFpd\nFFqtOQde+e5zBkwqJVbKYTNoQ1ZzcIi2lGLceazNVAnZkzNId+Ya1Z7gA5zs6qzq\nZdo+hkGbPJ17MLOhSOwoXCl/4OQ3IU83ZiNarD6WRX4pqOvqUP2s0ivvPiys3DUl\nnqUPhI/iCphXB34mkEoDCsTegwKBgQDR99P7Rs3Hr78nmxauoS+EqF4KOcuQsi5t\nE1JvVLy3hI6u+ZT1yWGhS961kwtiOtMq48eAJQjSBDhVTUi8YKKOF0GD4vWkE6Eu\n5YKlrOsPFuMSJE/4cUsCmd89WpuLWVmmecADWRHR/gjLtv4VWqKWJVM4VnRCNLFs\n00fc73eed1714df4a6cc1e86ac52cd2c\nEmLxRQhUITUDfCzpPVsLX9qFmDG5sn+QU1zjmN4vRQzrPOHm9ieZ+V9DAb/vhd3R\nwXgSUHAsRTmrTQYZ/sBFH6UYIcM01D3ULFv4v+9Lb4In4WCanE6FtzWlAoGAXG4O\noUUP/WG+cn7xQzqtomZDz5iVpkLp8RZaaawRz2/JJ/myu2hFVC4EAkaS8lEW+ICB\nKEYlVd6JtfNpm5Omu4o9SwO0QuBpSi26j5hJecEHgMr/cUzeSmzWOzoR0wwoTQK3\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\n00fc73eed1714df4a6cc1e86ac52cd2c\nzYngm4r7JBPfYVjZaJzosg==\n-----END PRIVATE KEY-----\n"}
SHEET_ID=YOUR GOOGLE SHEETS ID                      example: 3GOVruasdasdsEX4mpl32ESWfrdsavvlxopbiphB_wGhs3
GOOGLE_CLIENT_ID=YOUR GOOGLE CLIENT ID              example: 5889999643-8mocko3nqjg88unasdli3lkjasdk.apps.googleusercontent.com

Please note that the GOOGLE_CLIENT_ID is missing from the .env.example file. I apologize for the oversight.

If you encounter any difficulties in retrieving the data, you can follow these steps.

you can find SHEET_ID in your Google Sheet URL. It's the string between https://docs.google.com/spreadsheets/d/ and /edit#gid=[bla bla bla]

To enable the app to write to your Google Sheets, please share your Google Sheet with the email address associated with GOOGLE_CLIENT_EMAIL.

Sorry for the inconvenience.

duynguyen33 commented 1 year ago

Hi @fauzialz ,

We have deploy with file .env in source code, Server start successful but website not working.

On Server after i running :

npm run dev

@ dev /home/duynh33/amifauzi.com-open remix dev

⚠️ REMIX FUTURE CHANGE: The serverModuleFormat config default option will be changing in v2 from cjs to esm. You can prepare for this change by explicitly specifying serverModuleFormat: 'cjs'. For instructions on making this change see https://remix.run/docs/en/v1.16.0/pages/v2#servermoduleformat Loading environment variables from .env 💿 Building... axios is possibly an ESM only package and should be bundled with "serverDependenciesToBundle" in remix.config.js. 💿 Rebuilt in 3.8s Remix App Server started at http://localhost:3000

Have it missing any step when deploy?

Thank for support so much

duynguyen33 commented 1 year ago

Hi @fauzialz

I have check and detect the error i am miss env GOOGLE_CLIENT_ID. I can run website now. Thanks you so much for support. Wishing you all good things

madamroger007 commented 1 year ago

Hello @fauzialz why when I try the message feature do I have to enable the gmail library on google api?

fauzialz commented 1 year ago

Hello @fauzialz why when I try the message feature do I have to enable the gmail library on google api?

Hello @madamroger007. By mentioning enabling the Gmail library on Google API, didn't you mean setting up a project in the APIs & Services section on Google Cloud Console? Sorry I don't fully understand the quotation, but if my guess is correct, then yes. You should set up a project so you can have the required data you needed to fill in the .env file

madamroger007 commented 1 year ago

Thank you for information 🙂

anggadaz commented 5 months ago

where i can get SHEET_ID? is this blank spreadsheet?

anggadaz commented 5 months ago

can you create video tutorial to build this web from zero?