Prevent Gatsby Cloud Build from triggering on server side changes - monorepo

I have a monorepo and I notice that even if I don't change my client-side folder (just changing my rails app), Gatsby Cloud still does a build on github when I push. How can I have it so builds are only triggered by changes to certain packages/directories?
Note: I already set my base directory to the specific package I want to deploy. Nonetheless when I make changes outside that directory it triggers a build

Related

How to add a service worker to an existing, old, react project?

I'm working on an old react project, which I need to add functionality to, but when deploying the react build on the server, it fails, claiming it cannot find several css and js files, although I published all files within the build folder. I tried different things:
First, I kept the old service-worker.js in the production folder the IIS uses, but replaced everything else.
Then, I tried also deleting the service-worker.js, since I thought it was optional, and my npm run build didn't create a service-worker.js file.
Then, I tried copying the service-worker.js file that existed on production, and manually changing it to point to my css and js files in the /static/ folder of my build folder.
All of these solutions have yielded the same result. So I have a few questions:
Is the service worker necessary? If not, could this error relate to something entirely different other than the service worker?
If it is necessary, why could my npm run build command not create the service worker with the rest of the files in the build folder?
If I do need it, how can I manually add it to a project that already exists?
If the production folder already had a service worker, and my build is not building it, I can also assume maybe my react version is newer, but I find that odd, since the computer I use is one an older employee in my company used, and I didn't manually change anything about this project.

Do I need gh-pages folder in my pero to host react app?

I know two ways of hosting an app.
You either go to settings and set source branch and select folder.
You can follow some steps like npm --save install gh-pages, npm run deploy and so on.
I tried to host my app the 1st way, but it shows README file and it doesn't show index.html in public folder.
The "Configuring a publishing source for your GitHub Pages site" does mention choosing a branch and folder.
But:
gh-pages is always a branch, not a folder.
the folder referenced in the documentation seems only to be /docs: try for testing your index.html in docs/ rather than public/.
That being said, try and test the new (Dec. 2021) feature:
GitHub Pages: using GitHub Actions for builds and deployments for public repositories
Today you will begin to see a new workflow running called pages build and deployment in your public GitHub Pages repositories.
This workflow is automatically triggered when you push to the branch configured for GitHub Pages in your repository.
As the name suggests, it builds and deploys your pages site.
The initial benefit of this change is enabling you to see your build logs and any errors that may occur which has been a long standing issue for Pages users.
However, in the future this will enable us to give you the ability to fully customize your pages build and deployment workflow to use any static site generator you want without having to push the build output to a special branch of the repository.
You may notice this workflow uses some new actions actions/pages-deploy, and actions/jekyll-build-pages.
For now these actions are designed to be used in the generated workflow, however, starting early next year we will introduce some additional changes that will enable you to take advantage of them.
Learn more about GitHub Pages

How to prevent `Navigated to http://localhost:3000/` for electron-react app

Typescript just relase 3.7.3 with optional chaining, so I wanted to upgrade a project for this feature.
However, after runing yarn upgrade --latest, and doing yarn start, the app will reload infinitely.
After couple days of debugging. This is what I find out, it seems like if anything changed recently on /public folder, then the app will be Navigated to http://localhost:3000/ which will cause it to reload infinitely due to the design of my app.
The project was working for previous dependencies, so I am not sure whethere it's a react or electron upgrade that they changed it such that the app will watch for /public folder. When public folder changed, and causing the app to navigate to localhost:3000. Anyone know what's the cause of this phenomena? And the reason behind this change, and also how to pass around this?
By the way, my app was a simple epub reader application. Currently, my app will load all the images, css files and stored them to public folder (delete those files on unmount). Thus the app can load these images, stylesheets. (I just tried to store these files just inside the src folder, and it seems react won't be able to load these resources dynamically).

Edit Files After Build, React

I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.

Gatsby.js: gatsby-plugin-google-analytics only firing events in production build

I'm using the gatsby.js plugin gatsby-plugin-google-analytics (version 1.0.31), and it only places my tracking code on my site when I run gatsby build. In that case, my tracking and click events work as expected.
When I run gatsby develop, the tracking code is not put on my page. It would be nice to have this in development mode, as I would love to test my GA click events without having to gatsby build every time.
Is there an option that would always add the analytics code, even in development?
I have gone through the source code of gatsby-plugin-google-analytics plugin of version 2.0.10 and analytics are dependent on environment variable NODE_ENV on for server sider rendering and also for browser.
So there is no option to set is via options for this plugin. There is a hacky solution to set the NODE_ENV environment variable to production using i.e. cross-env package.

Resources