Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

My GatsbyJS website fails to build #17

Closed
pedrolamas opened this issue May 21, 2020 · 17 comments
Closed

My GatsbyJS website fails to build #17

pedrolamas opened this issue May 21, 2020 · 17 comments

Comments

@pedrolamas
Copy link

pedrolamas commented May 21, 2020

My GatsbyJS website builds perfectly on Azure Pipelines, GitHub Actions, Netlify, and yet it fails to build as an Azure Static Web App.

After creating the website, I can see that the first run failed as I had a requirement for yarn ">=1.22" in the engines node inside the package.json file: https://github.com/PedroLamas/pedrolamas.com/actions/runs/111930224

I've now lowered that to 1.17, yet it still fails to build, this time due to some error while processing the images: https://github.com/PedroLamas/pedrolamas.com/actions/runs/111933866

The branch in use is here: https://github.com/PedroLamas/pedrolamas.com/tree/azure-test

@johnpapa
Copy link

johnpapa commented May 21, 2020

Thanks.

adding @miwebst

@annaji-msft
Copy link
Member

annaji-msft commented May 21, 2020

This morning someone also ran into this exact issue and the fix was to update the gatsby config

micahgodbolt/micahgodbolt.com@f516323

Error https://github.com/micahgodbolt/micahgodbolt.com/runs/696944712?check_suite_focus=true

@miwebst
Copy link
Contributor

miwebst commented May 22, 2020

Yes this is because our version of Oryx is missing this package: libGL.so.1

@johnpapa , @craigshoemaker we should update our Gatsby doc to do the build before our Github Action. Otherwise we will keep seeing people hit this.

@pedrolamas
Copy link
Author

pedrolamas commented May 22, 2020

Hi @anganti, thank you for your suggestion but I wouldn't call disabling the automatic conversion of images files to webp format a "fix", as that is basically cutting down the functionality provided by GatsbyJS!

@pedrolamas
Copy link
Author

pedrolamas commented May 22, 2020

@miwebst thank you for your comments, but wouldn't it be easier to just add the missing package to "permanently" fix the problem?

Also, my first failure was due to my own specification that this site required yarn 1.22 or above, I know I can bundle yarn in the repo, but is there a way I can force the build process to download and use the correct version of yarn?

@annaji-msft
Copy link
Member

annaji-msft commented May 22, 2020

@pedrolamas agree, a more better word would have been mitigate. And the other option would be as @miwebst suggested to skip the build all together via StaticWebApps GitHub action and purely use it for deployment.

The way to do that is update your main.ym l file and add the staticwebapp action step after build step. Replace the app_location with the location of build output(static content)

@miwebst
Copy link
Contributor

miwebst commented May 22, 2020

Yes Pedro you have a good point, we could add the missing package. The challenge here is that the more packages that we add to our base image, the larger it becomes, and the longer it takes for your action to start.

We are still investigating options for making this faster and have the libraries that apps need. If you have feedback on that, please let us know!

@pedrolamas
Copy link
Author

pedrolamas commented May 22, 2020

@anganti thanks for your help, seems that adding the build steps to the azure-static-web-apps-jolly-ground-016a8c003.yml file did the trick! pedrolamas/pedrolamas.com@b82fcbc

I still need to properly test this, but I can already see the site live at https://jolly-ground-016a8c003.azurestaticapps.net/

Images seem to be all missing but that might be a configuration issue of mine... I'll check that tomorrow (it's 01:24 in the UK right now...)

@pedrolamas
Copy link
Author

pedrolamas commented May 22, 2020

Ok, got it all working in the end, with images and custom domain!

https://azure-test.pedrolamas.com

I've ran some quick benchmarks on it:

Some initials quirks to deploy, but very impressive results in the end!! 😊

I'm closing this ticket as this is a fully valid workaround for the problem, but I would recommend either changing the instructions or making some changes on the way Gatsby websites (and possibly others) are built!

@craigshoemaker
Copy link

craigshoemaker commented May 22, 2020

@anganti, @pedrolamas - so does the doc need to have both the changes for disabling webp and updating the uses section?

@pedrolamas
Copy link
Author

pedrolamas commented May 22, 2020

My take is not to disable webp or anything else (it should just work as it is and not require specific changes for Azure Static Web Apps to be happy with)

Instead, just do a normal build before invoking the Azure/static-web-apps-deploy action so that all it needs to do is copy and publish the static files (this way, it will skip the need to run a build on this step, as it did on the previous one)

@johnpapa
Copy link

johnpapa commented May 22, 2020

@softchris - do you have this in your learn module?

@miwebst
Copy link
Contributor

miwebst commented May 22, 2020

Before we update the docs, lets finish our exploration into the larger image that should solve this problem. @pedrolamas do you mind if I fork your repo for testing?

@pedrolamas
Copy link
Author

pedrolamas commented May 22, 2020

@miwebst please go ahead! 😁

@softchris
Copy link
Member

softchris commented May 22, 2020

@softchris - do you have this in your learn module?

I don't have an instruction where I tell them to build the Gatsby project prior no. I'll wait for @miwebst before doing any update as he wanted to explore a solution involving the image

@miwebst
Copy link
Contributor

miwebst commented May 26, 2020

Hey @pedrolamas, I've updated our image to use the larger version of Oryx that contains the necessary dependencies for webp.

You will still need to downgrade your version of yarn. (@kichalla as a side ask, is there anything we can do to avoid this issue in the future- maybe download latest yarn on the fly?)

Aside from that everything should just work! Do you mind giving it a try?

@pedrolamas
Copy link
Author

pedrolamas commented May 26, 2020

@miwebst it works!!

I've just done my changes to use the default building mechanism and now it is working fine!

On the plus side, I was surprised to see that the environment variables my build needs are being correctly passed so everything works fine!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

6 participants