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
Related
The app
The application was made using ReactJS, React Router Dom, Styled Components and Redux ducks.
The backend we consume is also made by us using Amazon Amplify and GraphQL.
The goal
We need to define the meta tags of one of the application pages so that it is possible to share personalized links to users
in social networks using OpenGraphic meta tags and the like.
The problem
The project was made in ReactJS and ReactJS has only one HTML page as root (/public/index.html), in this way, everything is generated with Javascript in a root tag, and when it arrives in the browser it is transpiled, as we already know. The problem is that the crawlers responsible for understanding the meta tags are not able to understand Javascript and end up not finding the dynamic data that I am defining on the page that I need to share the link on. They understand that there is one html file and only.
Attempts to resolve the issue
1) Define the meta tags in the /public/index.html file itself
This solution doesn't work because the data we are using is dynamic and the index.html file is a static file
2) Using react-helmet
The solution allows meta tags to be defined, but as already mentioned, crawlers don't understand JS. So, despite being on the page, the meta tags do not appear when sharing the link.
3) Using some SSR technology
This is a possible solution, but we were unable to integrate any SSR Framework into React. And it is not feasible to change the base technology of the project. We can't just switch from React to Next, for example, as the project is already complete.
4) Using a small server made with express.js along with the React application to replace the meta tags in index.html with string.replace() simulating something like an SSR
This solution works, but it causes two requests to be made every time the page is accessed, once by express.js and once on the front-end side by React. Due to the number of requests increasing, this solution was discarded. But if necessary, you can do it. In this case it is also necessary to check if Amplify can keep the application and the small server running in the same project.
5) Using react-snap with react-helmet
React-snap allows you to create html snapshots of the pages of a React project based on their routes and links, this added to react-helmet generates a perfect solution for links to be treated well by web crawlers when they are shared. But the solution doesn't work with dynamic routes. For example, /your-route/:id is a dynamic route that expects an id to be fully defined. React-snap gets lost when trying to create a snapshot of a route that only exists when the id is set. Unfortunately, this solution doesn't work.
These were the solutions we used to try to solve the problem, but it was not possible yet. Probably attempt 4 would be the most ideal to solve the problem. But we are looking for the best way that will not generate reworks and future problems. If someone knows a better way to do that, would help us a lot!
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.
I have been trying to figure out how to learn making a website.
Does all blog or a any news website have to be a cms. Then wouldn't all pages be the same. If not how does one update their website when adding new posts. Can I do it only from database?
It seems if its made only on html and css updating it would involve adding new new html page every time?
For example this website, how do they add new articles?
Would you recommend making a blog on react?
Thanks very much?
Does all blog or a any news website have to be a cms.
I will say, yes and no,
You can dynamically add new html page whenever you have new posts, or blog, then you create a new route for each request. It works fine,(and a lot simpler, and less worry about other stuff, learn from there and then you get a taste of how it works, I will always suggest you to go with something easier, start really small, since you are starting to learn) until you have to post a lot of post, which will be troublesome to update the server code each time.
Where you have to do as follow: Update codebase (new route: /get/my-new-blog-123), then deploy your server code whenever you have a new post to the cloud server, eg: google cloud platform, heroku, etc. Which is a lot of work.
Till then, which comes to what you have mentioned, Content Management System, where most blog post is structure properly, such as how to insert a picture, text style, typography, etc. Then this html structure will store in database, the route will likely be /get-post/?article-name
article-name will be something u can query from database, then your life will be a lot easier with this.
Would you recommend making a blog on react?
Yes, definitely, It is easy to learn, but try not to overwhelm yourself with so many tools, such as formik(form submission), redux(state management), whenever you learn something from a blog, most time you will see this. Which will be quite overwhelming, when you are learning so many stuff at once. Especially, if you are really new to HTML, CSS and javascript.
Start small, learn fast, then grow. All the best to you.
It’s like when you fill out a form
When you press send or save
It’ll go into the backend which means it’s in the database
And from the back end it’ll render to the front which is the website
I can try to elaborate it more if you want.
And you can make a blog using any framework you are comfortable with
Or you can just use plain ol HTML Css and JavaScript.
I think it’s best to start at this before moving to a framework
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
How do you use those free AngularJS Dashboard Templates you find online?
I found many free angular dashboard templates.
They look nice, but I dont see documentation on how to use them,, some starting point for example.
Looks like you could use them to pull data from a database and represent it dynamically, but I dont know where to start in the most simplistic way.
for example, with this one:
http://startangular.com/product/flatlogic-angular-material-dashboard/
Start by merging your package.json and dev dependencies together, or using their project as the base, then you can do a lot in editing the partials in views/partials, and then for pulling data, you can implement an api into each of their controllers or pass information into each of the directives. There's no starting point for any data manipulation, it's more like a dashboard that you can send data into the panel-widget. This is only front-end stuff, so you must already have a location to pull data from.