netlify deployment build is failing for gatsby-contentful site - reactjs

I'm trying to deploy a Gatsby-Contentful site to Netlify and while deploying it gives me build error. While testing in localhost its working perfect.
Here is the screenshot of the error:
While in production the npm run build command is working perfect.
I have tried this solution but it doesn't solve the issue.
Invalid plugin options for "gatsby-source-contentful"
Link to the code on github is Here
I think there is something wrong with the contentful API keys while deploying but I can't figure out what is it.

You must setup environment variable on Netlify
Netlify environment variables are accessible during your build. This allows you to change behaviors based on deploy parameters or to include information you don’t want to save in your repository
Go to your site > Site Settings > Build & deploy > Environment variable, and add your variables
More details in this doc
Update 2021-06-29
The problem turned out to be process killed while querying during build on Netlify. AVIF transformation while querying gastby image data causes resource exceeded on Netlify. Netlify team and Gatsby are still working on this.
The temporary solution now is to exclude AVIF from query.
Discussion post

Try to profile your memory application if it's consuming a lot of memory during npm run build on your local setup. In my case it was peaking up to 1.5 GB and Netlify will trigger an error build during deployment.
Adjusting the CPU Count to a lower number did the trick for me. Site Settings > Build & deploy > Environment variable
GATSBY_CPU_COUNT = 2
Reference: https://www.gatsbyjs.com/docs/how-to/performance/resolving-out-of-memory-issues/#try-reducing-the-number-of-cores

Related

React Js App is not working at localhost:3000 but it' works fine on localhost:8888(Netlify Dev)

I am Building a tiktok-clone using react js ..with the help of netlify cli (Netlify Dev)..it works very fine in localhost:8888, but it doesn't work in localhost:3000.My database for this project is datastax astra. Need Help!!
This is the pic...on localhost:3000 and also after deploying on netlify it shows the screen same.
This is the pic when its run on localhost:8888 as a netlify Dev.
Please help!!!
PORT 8888 is the port your Netlify dev server runs on. You should access your application on PORT 8888 when you run netlify dev.
PORT 3000 is the port for your webpack dev server.
I was working on this same project today and trying to figure out this exact same problem but found the solution. It's an old question but for those still doing this workshop and come across this.
Reason why -
you have a file called .env that has your astra info on it
because you have this file on your local host, it will run netlify dev properly and use the info from that file
the problem is when you launch on the web, you can still have .env on your repository but it is ignored because of the .gitignore file
even if you delete the command in the .gitignore file, it won't work (no idea why)
Solution -
you have to import the .env info to your netlify environment variable so it can connect your netlify to your astra through the actual servers
Run this command in your integrated terminal:
netlify env:import .env
After rebuild and redeploy to production with netlify:
netlify build
netlify deploy -p
Note: I'm not 100% positive if it is necessary to build and deploy again. It just happened to not work for me until I did.
You don’t provide enough context. 502 error serves different purpose on particular sites so we can’t understand your problem. If it worked on 8888 then why would you want other port to take its place? As I could see your frontend is served on 3000 but media is not which could lead to 502. Are you running 2 seperate frontend server and backend server?
In my case, the problem was Netlify could not access my .env keys. To overcome it, I opened my app dashboard on Netlify and then click on: 1) site settings 2) environment variables 3) add a variable
For key just enter your variable name as it is in your .env file.
For values enter your variable value. No need to put ""
scopes can stay default (All scopes and Same value for all deploy contexts)

React-snap build fails unless build folder is uploaded to server

I'm using ReactJS and need some help with the build.
I am hosting a static site on a dedicated server.. in order to process that site I currently run my build locally and upload the 'build' folder to the server.
I've recently decided I should probably generate some static files for SEO (and adsense approval) and therefore I've added react-snap.
I run npm run build from my directory, and react-snap runs postbuild as expected however it fails unless I upload the build to the server first and then run the same build again to generate the static files (and then have to upload these again to the server for the static content to be available for search engine crawling).
I'm obviously missing a fundamental step in my build process here. I already want to refine it to a Git and push that to the server but I don't think this will help my react-snap problem.
Can anyone help?
Answering my own question for anyone with this problem...
My production variable for homepage was set specifically to the domain.. this is not required and does not allow for local crawling of the site. Explanation here:
https://github.com/stereobooster/react-snap/issues/153

Google Cloud Platform: Updating a project after deployment

I am using Google Cloud to deploy my application. I have followed the steps in the documentation for deploying. I deployed early on in my project and it was successful. I then decided to change some files and update some features in my app. For this i followed the documentation for updating a deployment. This update was successful. It had me create the deployment in my Deployment Manager and run the gcloud commands to commence update. When I redeployed with gcloud app deploy, it was successful.
I have since added a couple more lines of code and features in my application. I followed the same documentation for updating a deployment as I had the first time I made an update and it is no longer working for me.
Does anybody have any idea what would be the problem? Again, I was able to successfully deploy, and even update that deployment once by following Google Cloud docs. Now I am having no luck.
Have you been changing the version number? Go to:
https://console.cloud.google.com/appengine/versions?project=< your project name >&serviceId=default
And make sure the version you want is active. Also, you can try:
http://<VERSION>-dot-<SERVICE>-dot-<PROJECT_ID>.<REGION_ID>.r.appspot.com
Example:
https://20200813-dot-myapp.uc.r.appspot.com
if the version number was 20200813 and your appname is myapp and the region is uc

I'm getting an error: pathspec 'branch-name' did not match any file(s) known to git

I'm currently deploying a nextJS site to github pages but was getting an error upon running npm run deploy. I'm suspecting it is a git checkout error but not sure where to start investigating.
Here's a screenshot of the error:
Am I missing something?
Any help would be much appreciated.
This is fixed. I've used ZEIT Now to deploy my application instead. See:
https://nextjs.org/learn/basics/deploying-a-nextjs-app/deploying-to-zeit-now
Then, assigned my domain name to my ZEIT Now deployment. For my code to still be visible in Github, I've just pushed my NextJS site to the repo.

Unable to resolve "./aws-exports" from "App.js"

I have been building an app with awsamplify for quite some time now. Today I descided to run some test and when I did
npm run start-web
Everythin worked fine. Now I went on to run mobile test with the use of Expo and ran
npm run ios & npm run android
which both returned the following errors.
Unable to resolve "./aws-exports" from "App.js"
Building JavaScript bundle: error
my problem is similar to the one below just its amplify and not awsmobile
https://github.com/aws-amplify/amplify-js/issues/669
Deos anyone know what I can do to resolve this?
Thanks alot!
I jsut removed some unused imports and the error changed to this
Unable to resolve "#aws-amplify/ui/dist/style.css" from "node_modules\aws-amplify-react\dist\Amplify-UI\Amplify-UI-Components-React.js"
Barely mentioned in the AWS docs:
For setting up a local dev folder, from an existing amplify repo, use an amplify env pull,
It will "pull" the ./aws-exports.js from the server, the latest one that was pushed there,
similar to git push and git pull but for the amplify env
It's true that an amplify push will create the ./aws-exports.js file,
but it will also "push" it to the server, overwriting whatever is there.
amplify status is also a handy command, similar to git status
I ran amplify env pull
and then found it in the ./src/aws-exports.js
not sure if the pull did it, or if it was always there but this is for an existing expo project
Confing your projects, using terminal go to the main folder and amplify init to config your project
amplify init
Do you to use an existing environment? (Y/n) Y
Choose the environment you would like to use: dev
Choose your default editor: Visual Studio Code
Choose the type of app you're building: javascript
What javascript framework you're using: ionic
Source Directory Path: src
Distribution Directory Path: www
Build Command: npm run-script build
Do you want to use an AWS profile? Y
Please choose the profile you want to use: select your personal IAM profile

Resources