Debug Gatsby site on Netlify - react-hooks

My portfolio is made on Gatsby and deployed to Netlify. It works fine locally but there are bugs on the live site on Netlify. How can I debug this? I cannot use console.log and there are no console errors. How can I debug this?
The issues are to do with a component that shows based on whether a hook is true and the image doesn't render through childImageSharp

If it's being hosted on Netlify, all it is doing is running gastby build and then serving the site up from the public folder. You should be able to run gatsby build && gatsby serve locally to mimic the issue you're seeing on your deployed site. If you can't reproduce it, try cleaning out your .cache and public folders with gatsby clean.

Related

Connect Laravel pretty url and nuxt js

I satarted a project based on a Laravel-Nuxt Starter kit, found it here : https://bestofphp.com/repo/cretueusebiu-laravel-nuxt-php-starter-projects
I connected it to Laragon, so I can have pretty urls and making it work on Apache and MySQL. It works nocely, and when I do npm run start, I can access the website locally on localhost:3000 and it updates. However, if I use the pretty url given by Laragon, example.home, it goes to the index.html in the public server, but it doesn't update, no matter what I do. I tried npm run build, but the public folder isnt updated, the changes I do in the Vue component are only visible in localhost:3000.
What can I do to update the public folder according to the changes I do ?
Thank you !

Django REST + Vue3 deployment with Passenger

I have a local app with a Django backend and Vue3 frontend, and I have to deploy it to a Dreamhost Shared Host. I've already deployed the backend with Django and Passenger and it's working (the admin panel and its API is working), but now I need to add the frontend side to the server.
I've followed the instructions to deploy a Vue app, generating the dist folder with npm run build and then adding it to my public folder in the server, but nothing happens. I can't find any tutorial or anyone trying to build something similar, so any help to understand what I should have to do is welcomed.

Why doesn't my website stop loading (Svelte)

I made a portfolio website, but this site doesn't stop loading.
Sorce code is here.
Does anyone have a solution? or the reason why this happens?
Deploy only your bundled static files. I can access your entire svelte project under your domain. check the sources tab in your browser's DevTools.
since you use vercel for deployment, check this out.
https://github.com/vercel/serve
Check for service workers (If you are using them)
But more probably
2) ALWAYS npm run build before firebase deploy

Fetching data from strapi, with gatsby app deployed to netlify

I am building a web app with Gatsby and are having trouble figuring out how to fetch data from the deployed Strapi-app. Gatsby is deployed to Netlify, Strapi deployed to Heroku. (I have no trouble fetching data when running both projects locally)
I appreciate all the help and useful advice!
EDIT:
Found one solution to this problem. In gatsby-config.js -> gatsby-source-strapi; set apiURL = "process.env.API_URL || 'http://localhost:1337'", and made a new file called ".env.development" in the root folder and typed in "API_URL='your-heroku-app'"
I am sure there exist a similar solution to use when it is not in development-mode.
We explain how to deploy both Strapi on Heroku and Gatsby on Netlify in this tutorial: https://strapi.io/blog/building-a-static-website-using-gatsby-and-strapi#11deploygatsbytonetlify
I hope it will provide the answer to your question :)
Cheers!

Vue components not working on live server

My components are not being rendered when I upload my project on a live server. It works fine on my local machine after I run npm run production when I upload the changes none of the vue components are being loaded in the page. On my local machine the vuejs dev tools tells me the site is running in production but when I go to the live server in the console it says
You are running Vue in development mode.
and on the browser taskbar it says
Vue.js not detected
I have no idea how to fix it. I saw a post saying I should upload the node_modules folder to the live server. But I doubt that would change anything plus it would take too long. How can I fix this?
I found out that the server was loading an older copy of the js file. So I had to apply cache busting by adding a phantom query to the end of the file. <script type="text/javascript" src="/js/app.js?v=2.4.1"></script>

Resources