Client side or Server Side - React (App for a customer) - reactjs

i have a quick question, so i just built 3 websites for customers using React and they're all deployed and working but now one of these customers is asking me how they can update its content, all the website are stored either on one or many JS files after building them with npm run build and configured with webpack, how should i build a website where customers plan to change either texts or add new images? the websites have a couple of map functions to display many pictures or card based on products, so everytime theres a change i have to go through the react files and change them build it again and deploy them which seems pretty static to me even though React is supposed to work with components and make it dynamic, what would be the best approach and/or tools to build a website where a customer can change a .JS file with text in Cpanel file manager, or just add pictures to a directory in Cpanel file manager and have it render automatically, i was thinking that i should make it server side so i can avoid having to re build and re upload everytime that there are changes, bu what would be the best options besides React to make it dynamic, Should i use node, express??
Thank you so much for your time !

One of the options could be Contentful API, you can store all of your data there and add permission to your customer to edit the repo. This will make it easier to change the content that you mentioned: "the websites have a couple of map functions to display many pictures or card based on products". So what you will do is simply fetch data from the API and render it on your website, this will allow your Customers to CRUD the content of your website, without your intervention. It is pretty easy to use, you can find out more about it here: https://www.contentful.com/developers/docs/.
Regarding the content of the website itself, e.g pages, texts on pages, and other static stuff that does not depend on actual data, but it's only a part of your code, I think it could be hard to manage without you coding it manually. If there is an exact part of content data that is going to be changed, you could make a new Admin page, where the user will be able to change the content and data on your website, and in this could you will have to add some back-end (node, express, etc). But what you're describing is actually CMS which is really popular nowadays you might want to take a look at some of them:
https://www.wix.com/
https://wordpress.com/
But if the Texts that you've mentioned are just a part of models e.g You have a product with something like this:
const product = {
productName: 'name',
price: '100',
image: 'img',
avialable: false,
}
and clients want to change productName, price, image, avialability then Contentful is pretty sufficient for you. If you will need some help with this Platform you can DM me I will try to help you.

Related

React Native Data Base

Ok... I am so confused. I am new to React Native and I have created a simple mobile app that shows a list of news (containing a specific image, title, and description). I have a lot of experience with programming most of which comes from game development. I have created many games and I am familiar to cloud storage systems that you update and retrieve data.
Right now I just have a local json file with an array of 'news' Objects and then I loop through this array to show the news posts. Basically, I want to move this json file to somewhere online where the app just retrieves it. This would make it so that the News json file could be edited in order to change, add or remove new news. So, I don't need account or anything. I don't even need to be able to set/update data from the app. I just need a place to store images and files that can be retrieved from the app.
I have tried using the common react native data base systems like sqlite, realm, mongodb, and firebase, but must not understand how they work because they make no sense. Also, it seems like when making a mobile app all of these services require you to setup a backend and start a server, which from what I can tell doesn't work on mobile... It seems logical that there would be a global data base that I could store storage on and just receive it by a simple fetch or network call. Am I totally crazy here ?:) Any help or guidance is super appreciated. Thanks.

(Gatbsy-React) Dynamic Path: how persist pages dynamically created with API to be crawled by Google Bot, and visited directly by users

I have this big issue.
I have developed a Gatsby website for the car parts market.
The users can select car model and part type and receive a page with the parts for their specific car.
I have used React Route to create dynamically the new path and an API that recall the data:
https:/mysiteAPI.com/{car.id}/{part.id}
The paths that will be created are something like that: https:/mysite.com/comparison/{car.name}-{part.name}
The big issue that I have is that this path will be created only when i click on
Using this approach I can not generate the pages when I build the website, but the pages will be generated only when users click.
Actually I need that pages will be readable from search engine crawlers for SEO reasons.
I tried to create each page inserting in Gatsby Node a CreatePage, but the system crashed, due the huge amount of pages (over 5 million).
I don’t know how to generate pages that can be readable by crowler and persist. I hope that someone of you can help me to improve my site.
Thanks in advance
Take a look at the createPages API, available in the gatsby-node file of your project. If you would like to create static HTML files in the build process for each item you need to first fetch them somehow. With the data in your possession you could iterate over it and call createPage for each page you want to create.

Can we use Gatsby js to build a simple social networking website

I need to develop a simple social networking website which will just act as a platform for different businesses to discover each other. Each Business man/Service provider will have his own profile that he can manage and these profiles will be characterised and sorted according to their types. Basically I would need a Home Page, Profile page for each profile, Search page along with registration and login. I don't need to make any messaging module.
So for this purpose I wanted to know if using Gatsbyjs is a good idea, also if not then what are the other frameworks that I can use for a easier and faster development.
One main problem with gatsby for this use case is: Once a new business signs in and wants to create and edit a new profile, this new profile is not part of the build process. Gatsby builds only the HTML pages you know in advance. Triggering a rebuild, which may take several minutes, everytime a business edits their page is not feasible. You would have to hack something together with client-side routes which is not the intended nor recommended way of doing things.
A server-side framework like Next.js is better suited for this task. This way you can dynamically add and change the profile pages.

How to build create-react-app SPAs so that minor changes can be made without rebuilding the entire application

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

Adding Blog Content/Static files to existing Preact.js website

I currently have an existing Preact JS site set up but want to add blog section.
So basically easy way to add new pages and routes.
I.e. blog/content-1, blog/content-2
I know I could easily create these pages and routes manually but is there something better out there that fits into existing sites ?
I.e. a lot of the static site generators I see out there, basically you need to run from the start and they generate a new site.
But in my case I just wish to add an extra section to my site which will be the static blog entries, not sure what the best tools out there for this is ?
If any ideas or suggestions would be great.
The preactjs.com website is built exactly how you are wanting to build this. It's open source: https://github.com/developit/preact-www
Basically, fetch your HTML content via Ajax (however you'd like), then render.it as Virtual DOM using preact-markup.
For a real-world example, here's how preactjs.com does that:
https://github.com/developit/preact-www/blob/master/src/components/content-region.js

Resources