So, I have a GatsbyJS website done. And I need some clarification on how to proceed.
So what I want to do:
Create a blog with GatsbyJS using Contentful as my CMS. Each time I add something on Contentful, my website will query data from Contentful and update in website.
So where I'm stuck:
I'm unsure of how to approach the last part. I ran gatsby build and it came out with production html files which I have successfully deployed on my server and it works with the current entries on Contentful.
But, this is different from what I wanted because, I have new entries on Contentful that I wish for it to be updated on my website.
Is there a way for me to update my website each time I create a new entry on Contentful. Or must I do the build each time I create a new entry.
Thanks!
The solution to this is to set up web hooks. You can define these in Contentful and when some one publishes content requests will be made to a server you define.
I'm not sure what Digital Ocean offers but when you have a CI server/service (Travis, Circle) in place, it will re-build your site with fresh data after receiving a hook. :)
Related
I have a website which I have developed using Gatsby. I have used WordPress for posting blogs for website and I'm fetching blogs using GraphQL. Everything is working fine, and I deployed the website on S3. After production deployment, when I published a new blog in WordPress, it is not being listed in the website using GraphQL. I had to re-deploy the code to make it working.
Is there any other way to load WordPress GraphQL data in production without rebuild and re-deploy?
What you described is normal behavior. Gatsby is a static site generator so your data is "static" in terms of what is being built at the moment you run gatsby build. If something in the source changes, like publishing a post, you need to rebuild the site to make them available by GraphQL, hence Gatsby.
What you want to achieve is called webhook: an action that triggers another action. Like when publishing a post, trigger a new deploy to force the publishing of that post in a production environment.
You can follow this article for a more approach that suits you.
If you are using Gatsby's v4, you can use the new SSR (Server-Side Rendering) brand feature to serve data from the server or DSG (Deferred Static Generation) for a combined approach, partially static, partially server-side served.
I have this website were we can create new questions. Whenever a new question is created a new url is generated I want google to crawl my website everytime a new question is added and display it in google.
I have my front end in react js and backend in express js.
My front end is hosted in firebase and backend in heroku.
Since I am using javascript and my urls are all dynamicly generated google does not crawl or index them.
Currently I am writing all dymaicly created urls into a file in my root folder in backend called sitemap.txt.
What should i do to achive this?
my sitmap link
https://ask-over.herokuapp.com/sitemap.txt
my react apps link
https://wixten.com
my express.js link
https://ask-over.herokuapp.com
i want to add
https://ask-over.herokuapp.com/sitemap.txt to google search console
In fact create-react-app is the wrong tool when SEO matters. Because:
there is only one HTML file
there is no content inside the single HTML file
heavy first load
etc, [search about reasons of using nextjs a good article
SPAs are the best for PWAs, admin panels, and stuffs like this.
But take a look at https://nextjs.org/docs/migrating/from-create-react-app. And my suggestion is to make some plans to fully migrate to Next.js.
Also, search about react SEO best practies and use the helpers and utilities like React Helmet.
create-react-app is not the way to go if you are going for a seo friendly website.
if it's behind a login screen you can go with create-react-app.
if the site is a blog or documentation site , I would suggest you migrate to nextjs or gatsby js or if it's a very small webpage go with raw html, css , js
It's not possible for Google or any other web crawler to crawl your SPA Websites. The best way to fix this is either to use Server Side Frameworks like Next.js or use pre-rendering and redirect crawlers to pre rendering server instead of main website.
You can checkout prerender.io, it has the open source version as well, you can run it on a seperate server and use one of the snippets/plugins for your web server (apache/nginx/others) to redirect requests to different upstream server.
I've been using it for one of my projects (e-commerce store) built on VueJs and it works like a charm.
To understand the basics, what it does is it'll load your website in a browser, and cache the rendered code in it's database/cache, and when any crawler visits your website they'll be redirected to cache which is the generated html page of your website, and crawlers will be able to read everything smoothly.
I'm currently working on a GUI utilizing REACT (node.js backend) and I want to create a page that pulls repo file names from a specific Gitlab repo (my own repo). So I would press a button and up comes a sub-window showing the Repo data pulled. I intend to use this to grab the name of the file and store it for later use on another part of the GUI.
I am new to REACT and I'm still learning it. My question is how would I go about grabbing the information as far as coding goes? I imagine the Gitlab REACT API would be what I want to use for starters. I've seen videos where they create a page to search data from different repos such as Giblab users, but I could not find the same for searching for repo file structures.
Thanks for any help.
I write my first Gatsby Page. I also use Laravel as backend server.
In my project i have many slug pages. I used createPages and api connection to create them. User can add files like images, audio files and pdf. When it happen, page should change a bit content and show this file on specify address. Develop version works fine (i bind button to start npm run refresh). I used gatsby refresh endpoint and add to scripts:
"refresh": "curl -X POST http://localhost:8000/__refresh"
And it's work fine. But i don't know how change this to use it properly on production build. Can anyone help me? Thanks
The ENABLE_GATSBY_REFRESH_ENDPOINT environment variable is only working on development. According to the documentation:
During local development, it can be useful to refresh sourced content
without restarting the development server. To facilitate this, Gatsby
exposes an environment variable called ENABLE_GATSBY_REFRESH_ENDPOINT.
What you need is called a webhook. Basically, a webhook is a way for an application to trigger a change that happens in real-time in a CMS.
Each CMS has its own way of implementing webhooks, but the idea is to trigger a build process once a change in your CMS occurs.
I am using create-react-app to create Single Page Websites (SPAs). I often have websites with a lot of images and content that require a minor textual change or a minor update. Is there anyway to make these without rebuilding the entire application? If I rebuild it all the image names and everything changes and the whole enchilada has to be uploaded and built for minor changes in content to the website. How can one approach this?I dont want to go back to building in PHP or another platform where individual pages can be tweaked and uploaded without having to upload everything every time there is a minor change. How are you approaching this in building react based websites?
Rebuilding a CRA should not take very long or cost much, you can use a Continuous Integration solution like Netlify to update your site programmatically based on the changes.
Or you can just build an API and write a modular site using the APIs. That is how most CMS work. You should try headless CMSs if you don't want to write all APIs yourself.
if you want to just develop frontend code and don't worry about images, videos, texts and so on you should really try and headless cms that will provide contents via API and a nice editorial console for your users.
There are a lot of them, and for sure you will find one that suits your needs.
I work in ContentChef ( full disclaimer here!!!) which also provides a nice SDK in js or typescript so you can easly get started.
If you want to give it a try: https://www.contentchef.io/developers/headless-cms-for-react