I'm currently developing a blog using react and Webpack and need some advice. I'm storing the contents of each blog entry as markdown in a database, the markdown for any given entry may contain a number of images and this is where my problem lies.
What I wrongfully assumed when choosing this approach is that when I converted the markdown to HTML, the images would resolve themselves correctly. However due to my limited experience using Webpack it turns out this is not the case and instead assets must be manually imported first, great.
I've tried using the markdown loader for Webpack, but of course this requires more manual importing of .md files which I wanted to avoid.
Essentially, is there a better approach to this or is there some way to load images without importing them using Webpack?
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'm using react-meta-tags to add/update the meta tags in my react site. While it works fine, I noticed that there are plenty of tags added in, which has the styles present in my css files. These tags were not present when I was not using react-meta-tags.
Now, is it okay for these tags to be present in ? How will it affect my site if I leave it as it is? Should I leave it as it is? I would appreciate it if you could give me a detailed explanation, since I'm new to SEO (and web-development) and have a very shallow understanding of it right now.
Its necessary for these tags to be present. What happens is that you don't ship your actual code to production, you minimize it and then bundle it for that. Since you are using react , the browser cant support JSX on its own so react automatically bundles you code in (runtime as well although not as efficient as in production) and converts JSX to different HTML, CSS and JS files(in minimized form) to ensure you site works fast and reliably without any support issue from different browser.So don't worry about that. While it does enable faster reloading and better performance in general which helps with google rankings but SEO is a different game altogether, you need Server Side Rendering for that and assuming you are using create-react-app you are using with Client Side Rendering. My suggestion don't focus on SEO and just ensure you are using Sematic elements that would be enough for now.
we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!
I want to develop a multi-page React app, where you have multiple HTML files instead of a single HTML with routes. However, so far all the solutions I found require a Node.js server.
After much struggle I eventually wrote a webpack config file to generate multiple HTML files myself, which generates multiple HTML files according to a certain file name pattern that I defined. The config file, however, is not something easy to maintain.
Then I wonder: isn't there a standard solution for that?
It is not a part of the pure React library, but quite a few frameworks that are based off React have a routing and html-generating solution for you.
Have a look at Gatsby, which is what I use for your exact scenario.
Each .js file inside src/pages will generate its own page in your Gatsby site. The path for those pages matches the file structure it’s found in.
I am able to display a local image with html img like this:
import youtube from "./youtube.png"
and
<img src={youtube}/>
However, I have got like hundreds of images I want to use import, so I don't want hundreds of import statements.
Is there a shorter syntax for img src to refer to local images in React? And if webpack is the only way out, will webpack take much time to set up? And since I am on this topic, how does a website typically display images? Do devs download the images and upload these files when the website is deployed or do they straight up use src="https://....."?
Sorry if that is too many questions, I am really only concerned about the syntax to refer to local images, thank you.
You could put them all in the public folder and access them that way if you don't want to use web pack.
As far as I know, there is not shorter way than the method you mentioned to import images, of course you can use web pack as well and once that's set up you can reference it.
As a side note this is from the React docs on usage of the public folder:
You have thousands of images and need to dynamically reference their paths.
You can read more about it here: https://facebook.github.io/create-react-app/docs/using-the-public-folder