Deployment issue with Vercel

🙋Get Help
,
#1

I am having a trouble deploying my app to vercel. I keep getting the 404 error on the homepage, see image bellow:

Screen Shot 2021-03-12 at 9.57.35 AM
Screen Shot 2021-03-12 at 9.57.35 AM1083×656 24.5 KB

I followed this link:
https://docs.frontity.org/deployment/deploy-using-vercel

I don’t get it what am I doing wrong. Do I need to add some extra setup?

Maybe I have the wrong deployment settings here in the Vercel app. I am not sure (checked with different settings but still the same).

Screen Shot 2021-03-12 at 10.01.31 AM
Screen Shot 2021-03-12 at 10.01.31 AM966×758 55.9 KB

Screen Shot 2021-03-12 at 10.05.57 AM
Screen Shot 2021-03-12 at 10.05.57 AM818×992 161 KB

I thought it’s pretty straightforward thing by just running npx vercel. Any ideas what could go wrong? I ran npm run build in the local env and it builds without any problem. I am able to serve the build using npm run serve command.

#3

Hi I think the error is because you are visting https://mikitours-frontity.vercel.app/ which is the production url for vercel.

npx vercel serve the website in development
To launch the build to production you have to execute npx vercel --prod after executing npx vercel

Anyways, the development url will be something like this vercelProjectName-vercelUsername.vercel.app instead of vercelProjectName.vercel.app which is the production build

image
image890×309 33.1 KB

#4

Hi and thanks for replying @Hussein .

I am getting the same error no matter I use --prod flag or not. Still, the 404 occurs.

Not sure what to do / what should I check. Are my build settings from Vercel (see screenshot) ok?

#5

Hi, on the build settings everything seems to be ok. And the 404 error is returned by Vercel because they don’t recognize that subdomain. Is the domain in vercel correctly set up?
https://vercel.com/your-username/your-project-name/settings/domains

Is a screen like this one:

image
image1905×866 56.2 KB

Also, another thing to check is the url returned by the terminal once you do npx vercel:
(The Preview One). Is it the same as this one “https://mikitours-frontity.vercel.app/”

image
image890×309 33.1 KB

#6

UPDATE / PROBLEM SOLVED:
Previously, I had a problem related to this (@David’s answer helped me):
https://community.frontity.org/t/i-am-started-getting-error-typeerror-cannot-read-property-add-of-undefined/1975/16

Basically, whenever I run npm install in the root of the project, the node_modules folder was created at packages/mars-theme/node_modules which caused some modules to be duplicated and therefore breaking the app.

Removing packages/mars-theme/node_modules brought my app to life again (I could run it again with npm run dev without errors).

However, I still couldn’t deploy the app until I reset/removed the package-lock.json at the root’s directory.

After this, running npm install inside of an root’s directory doesn’t create packages/mars-theme/node_modules folder any more.

I guess this was the main problem with the deploy, because in the deployment process npm install must be run.

Does this makes sense? I lost several hours on this today, debugging.

1 Like
#7

Hi @mh123

Yes, it makes totally sense. The package-lock.json keep the dependencies locations so it also need to be removed for a complete re-install.

We’ve detected this is not very clear for the final users and we’re working on this (both the documentation and the framework) so the final users don’t have to worry about this.

Here you have some related threads:

And here’s the FD created to try to fix this:

1 Like
#9

@juanma that’s good to hear. Thank you!