HamishMW / portfolio

My personal portfolio website built using React and three js
https://hamishw.com
MIT License
2.38k stars 514 forks source link

How can I deploy this on Netlify/Vercel? #50

Open mayankjain25 opened 1 year ago

MilanObrenovic commented 1 year ago

Having the same problem. Seems like deploying to vercel is a lot harder

image image
mayankjain25 commented 1 year ago

This was simply not deployable on Vercel. Had to switch to Netlify instead. Do note that there were a LOT of ESLint errors that were generated in the process. My suggestion would be to turn it off to avoid some of the warnings that hamper the build process.

MilanObrenovic commented 1 year ago

This was simply not deployable on Vercel. Had to switch to Netlify instead. Do note that there were a LOT of ESLint errors that were generated in the process. My suggestion would be to turn it off to avoid some of the warnings that hamper the build process.

What makes netlify so different? Im trying to deploy on amazon using AWS Amplify but there is still the same/similar error during building process. ChatGPT said it has something to do with --no-sandbox mode but i'm having the same error regardless.

Have you had the similar error logs and what have you changed to fix them?

mayankjain25 commented 1 year ago

I just switched to Netlify when Vercel wasn't working. Fixed all the errors that came along the way, most were warnings rather than errors.

On Thu, 30 Mar, 2023, 2:47 am Milan Obrenovic, @.***> wrote:

This was simply not deployable on Vercel. Had to switch to Netlify instead. Do note that there were a LOT of ESLint errors that were generated in the process. My suggestion would be to turn it off to avoid some of the warnings that hamper the build process.

What makes netlify so different? Im trying to deploy on amazon using AWS Amplify but there is still the same/similar error during building process. ChatGPT said it has something to do with --no-sandbox mode but i'm having the same error regardless.

Have you had the similar error logs and what have you changed to fix them?

— Reply to this email directly, view it on GitHub https://github.com/HamishMW/portfolio/issues/50#issuecomment-1489337413, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATL3IXRQ247GCAUXUQOYV5TW6SRGBANCNFSM6AAAAAATLP4YQU . You are receiving this because you authored the thread.Message ID: @.***>

MilanObrenovic commented 1 year ago

I just switched to Netlify when Vercel wasn't working. Fixed all the errors that came along the way, most were warnings rather than errors. On Thu, 30 Mar, 2023, 2:47 am Milan Obrenovic, @.> wrote: This was simply not deployable on Vercel. Had to switch to Netlify instead. Do note that there were a LOT of ESLint errors that were generated in the process. My suggestion would be to turn it off to avoid some of the warnings that hamper the build process. What makes netlify so different? Im trying to deploy on amazon using AWS Amplify but there is still the same/similar error during building process. ChatGPT said it has something to do with --no-sandbox mode but i'm having the same error regardless. Have you had the similar error logs and what have you changed to fix them? — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATL3IXRQ247GCAUXUQOYV5TW6SRGBANCNFSM6AAAAAATLP4YQU . You are receiving this because you authored the thread.Message ID: @.>

I just did it, the site can be deployed via Amazon AWS Amplify (easiest method)

mayankjain25 commented 1 year ago

That's good to know, can you share the build logs with me? Would love to have a look

Regards, Mayank

On Thu, 30 Mar, 2023, 3:19 am Milan Obrenovic, @.***> wrote:

I just switched to Netlify when Vercel wasn't working. Fixed all the errors that came along the way, most were warnings rather than errors. … <#m4165086458229375386> On Thu, 30 Mar, 2023, 2:47 am Milan Obrenovic, @.> wrote: This was simply not deployable on Vercel. Had to switch to Netlify instead. Do note that there were a LOT of ESLint errors that were generated in the process. My suggestion would be to turn it off to avoid some of the warnings that hamper the build process. What makes netlify so different? Im trying to deploy on amazon using AWS Amplify but there is still the same/similar error during building process. ChatGPT said it has something to do with --no-sandbox mode but i'm having the same error regardless. Have you had the similar error logs and what have you changed to fix them? — Reply to this email directly, view it on GitHub <#50 (comment) https://github.com/HamishMW/portfolio/issues/50#issuecomment-1489337413>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATL3IXRQ247GCAUXUQOYV5TW6SRGBANCNFSM6AAAAAATLP4YQU https://github.com/notifications/unsubscribe-auth/ATL3IXRQ247GCAUXUQOYV5TW6SRGBANCNFSM6AAAAAATLP4YQU . You are receiving this because you authored the thread.Message ID: @.>

I just did it, the site can be deployed via Amazon AWS Amplify (easiest method)

— Reply to this email directly, view it on GitHub https://github.com/HamishMW/portfolio/issues/50#issuecomment-1489374482, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATL3IXRDYVHTOUPWJX4RMVTW6SU7FANCNFSM6AAAAAATLP4YQU . You are receiving this because you authored the thread.Message ID: @.***>

Idoesfrontend commented 1 year ago

For anyone having issues with deployign with nelify, here is a quick solution

creat a file on the root folder called netlify.toml

and add this

[build]
publish = "out"

[build.environment]
NETLIFY_NEXT_PLUGIN_SKIP = "true"

[[plugins]]
package = "@netlify/plugin-functions-install-core"

When deploying on netlify, change the output folder from .next to out and you should be good

Idoesfrontend commented 1 year ago

I just switched to Netlify when Vercel wasn't working. Fixed all the errors that came along the way, most were warnings rather than errors. On Thu, 30 Mar, 2023, 2:47 am Milan Obrenovic, @.**> wrote: This was simply not deployable on Vercel. Had to switch to Netlify instead. Do note that there were a LOT of ESLint errors that were generated in the process. My suggestion would be to turn it off to avoid some of the warnings that hamper the build process. What makes netlify so different? Im trying to deploy on amazon using AWS Amplify but there is still the same/similar error during building process. ChatGPT said it has something to do with --no-sandbox mode but i'm having the same error regardless. Have you had the similar error logs and what have you changed to fix them? — Reply to this email directly, view it on GitHub <#50 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ATL3IXRQ247GCAUXUQOYV5TW6SRGBANCNFSM6AAAAAATLP4YQU . You are receiving this because you authored the thread.Message ID: @.**>

I just did it, the site can be deployed via Amazon AWS Amplify (easiest method)

Could you share some of the settings you used inside of AWS to have it fully functional? I ran the deploy command and it uploadded to my S3 Bucket but I am a bit lost into what to do now.

Tresillo2017 commented 1 year ago

Forget about netlify or vercel just create a github workflow under the folder https://github.com/Tresillo2017/portfolio-1/blob/master/.github/workflows/nextjs.yml like that.

Hanfried-Nguegan commented 1 year ago

For anyone having issues to deploy on Vercel because running as root without --no-sandboox is not supported. What you need to do in the og-image.js file you should pass --no-sandbox as arguments to the browser variable .This disables sandboxing in environments where sandboxing is restricted.

const browser = await puppeteer.launch({ headless: true, args: ['--no-sandbox'] });

kashif12702 commented 1 year ago

`[build] command = "npm run build" publish = "/build" base = "/"

Rewrite API requests to actual location of serverless functions

[[redirects]] from = "/api/*" to = "/.netlify/functions/:splat" status = 200

Catch all other requests that don't match a file or API route

[[redirects]] from = "/*" to = "/index.html" status = 200 [[plugins]] package = "@netlify/plugin-functions-install-core"` Use this code in your netlify.toml and just deploy on netlify

boombb12138 commented 1 year ago

Forget about netlify or vercel just create a github workflow under the folder https://github.com/Tresillo2017/portfolio-1/blob/master/.github/workflows/nextjs.yml like that.

Thank you very much! I deploy the website successfully in this method. For someone who never use github to deploy, remember go to project setting, enable this: image

rutkuli commented 6 months ago

For anyone having prerendering issues with mdx files on Vercel or any linux based services, you can try to install libgbm-dev and libasound2

sudo apt-get update sudo apt-get install -y libgbm-dev sudo apt-get install libasound2

ErinTomorri commented 6 months ago

Anyone figure out how to publish with netlify yet?

Lagstill commented 5 months ago

Can someone guide me on how to deploy on Vercel, I get `file:///var/task/build/server/nodejs-eyJydW50aW1lIjoibm9kZWpzIn0/assets/server-build-C2V4WFnV.js:4 import { renderToReadableStream } from "react-dom/server"; ^^^^^^^^^^^^^^^^^^^^^^ SyntaxError: Named export 'renderToReadableStream' not found. The requested module 'react-dom/server' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using:

import pkg from 'react-dom/server'; const { renderToReadableStream } = pkg;

at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:431:15)
at async c (/var/task/___vc/__launcher/bridge-server-BGIDXK2J.js:2:3579)

INIT_REPORT Init Duration: 833.46 ms Phase: invoke Status: error Error Type: Runtime.ExitError Error: Runtime exited with error: exit status 1`

uphiago commented 1 month ago

it's still hard to get things working on vercel, why? Haha tried everything, but i always get a 404 not found error i feel it's the builder output folder, but i've tried all of them