Deploy Frontity to Vercel

jordigarreta11 · 22 September 2022 15:59

Hello everybody,

First of all, I’m really new in Frontity and sorry if my questions are so simple. I have looked for the answer in the forum, but I couldn’t find anything that helps me.

I have finished my website on my local machine and now it is time to deploy it!
I have been following the different steps for deploying it to Vercel, but I can’t get it.

For what I understood, I have to upload to Vercel the Frontity project and to my web host the project of Wordpress (in a subdomain). Then, redirect the Vercel app to the domain where I would like to show the website. Is it correct? Or am I missing something?

If I am correct, I try to upload to Vercel the Frontity project, but there is an “Internal Sever Error”. Do I have to upload only the files inside the build folder after doing npm run build?

Thanks a lot in advance.

J.

appevolver2022 · 24 September 2022 03:57

create file vercel.json and paste the below content.

{
“version”: 2,
“builds”: [
{
“src”: “package.json”,
“use”: “@frontity/now”
}
]
}

Push your code on repo and then run command > npx vercel --prod

You will then have to authenticate Vercel and then changes will be deployed on Vercel

jordigarreta11 · 7 October 2022 13:37

Hi @appevolver2022 Thanks for your reply.

I have added the vercel.json file you told me, but I still have the same Internal Server Error… Here you have the link of the app: https://my-frontity-project-eta.vercel.app/

This is the Deployment Status I received:

[15:32:48.292] Retrieving list of deployment files...
[15:32:51.547] Downloading 54 deployment files...
[15:32:53.056] Looking up build cache...
[15:32:53.348] Build Cache not found
[15:32:53.385] Running "vercel build"
[15:32:53.885] Vercel CLI 28.4.7
[15:32:53.900] WARN! Did you mean to deploy the subdirectory "build"? Use `vc --cwd build` instead.
[15:32:54.014] WARN! Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
[15:32:54.025] > Installing Builder: @frontity/now
[15:32:55.880] Downloading user files...
[15:32:55.889] Warning: Detected "engines": { "node": "14.15.0" } in your `package.json` with major.minor.patch, but only major Node.js Version can be selected. Learn More: http://vercel.link/node-version
[15:32:55.903] Installing dependencies...
[15:32:55.903] Detected `package-lock.json` generated by npm 7+...
[15:32:56.957] npm WARN EBADENGINE Unsupported engine {
[15:32:56.958] npm WARN EBADENGINE   package: '[email protected]',
[15:32:56.958] npm WARN EBADENGINE   required: { node: '14.15.0', npm: '7.24.2' },
[15:32:56.958] npm WARN EBADENGINE   current: { node: 'v14.20.0', npm: '8.11.0' }
[15:32:56.958] npm WARN EBADENGINE }
[15:33:02.985] npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
[15:33:03.763] npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
[15:33:03.843] npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
[15:33:03.868] npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
[15:33:04.138] npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
[15:33:04.530] npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
[15:33:09.656] npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
[15:33:14.349] 
[15:33:14.349] added 944 packages in 18s
[15:33:14.350] 
[15:33:14.350] 60 packages are looking for funding
[15:33:14.350]   run `npm fund` for details
[15:33:14.368] Running "build" script in "package.json"
[15:33:14.375] Detected `package-lock.json` generated by npm 7+...
[15:33:14.375] Running "npm run build"
[15:33:14.670] 
[15:33:14.670] > [email protected] build
[15:33:14.670] > frontity build
[15:33:14.670] 
[15:33:16.270] 
[15:33:16.271]   - mode: production
[15:33:16.271]   - target: both
[15:33:16.271]   - public-path: /static/
[15:33:16.271] 
[15:33:16.300] Building es5 bundle
[15:33:32.119] 
[15:33:32.119] asset size limit: The following asset(s) exceed the recommended size limit (488 KiB).
[15:33:32.119] This can impact web performance.
[15:33:32.120] Assets: 
[15:33:32.120]   frontity-react.es5.deaa3729f19cc39b2bad.js (709 KiB)
[15:33:32.120] 
[15:33:32.120] entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (488 KiB). This can impact web performance.
[15:33:32.120] Entrypoints:
[15:33:32.120]   frontity-react (709 KiB)
[15:33:32.120]       frontity-react.es5.deaa3729f19cc39b2bad.js
[15:33:32.120] 
[15:33:32.120] 
[15:33:32.120] webpack performance recommendations: 
[15:33:32.120] You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
[15:33:32.121] For more info visit https://webpack.js.org/guides/code-splitting/
[15:33:32.121] 
[15:33:32.121] Building module bundle
[15:33:42.149] 
[15:33:42.149] asset size limit: The following asset(s) exceed the recommended size limit (488 KiB).
[15:33:42.149] This can impact web performance.
[15:33:42.149] Assets: 
[15:33:42.150]   frontity-react.module.bad4472f03e4212c67ab.js (552 KiB)
[15:33:42.150] 
[15:33:42.150] entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (488 KiB). This can impact web performance.
[15:33:42.150] Entrypoints:
[15:33:42.150]   frontity-react (552 KiB)
[15:33:42.150]       frontity-react.module.bad4472f03e4212c67ab.js
[15:33:42.151] 
[15:33:42.151] 
[15:33:42.151] webpack performance recommendations: 
[15:33:42.151] You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
[15:33:42.151] For more info visit https://webpack.js.org/guides/code-splitting/
[15:33:42.151] 
[15:33:42.152] Building server bundle
[15:33:53.543] 
[15:33:53.681] Finished.
[15:33:53.699] Build Completed in /vercel/output [58s]
[15:33:56.526] Generated build outputs:
[15:33:56.526]  - Static files: 5
[15:33:56.526]  - Serverless Functions: 1
[15:33:56.527]  - Edge Functions: 0
[15:33:56.527] Serverless regions: Washington, D.C., USA
[15:33:56.527] Deployed outputs in 2s
[15:33:57.390] Build completed. Populating build cache...
[15:33:57.590] Uploading build cache [400.71 kB]...
[15:33:58.186] Build cache uploaded: 596.235ms
[15:33:58.201] Done with "."

Thanks a lot!

1600tc · 19 October 2022 17:53

Hi, i’ve had this issue, simply remove your package-lock.json from your repo( eg add it on .gitignore) and let the server build its own. This happened because of a conflict between React version I guess