My task is to create a SPA with an iTunes API.
I got my basic functionality done but it's not SPA yet, i wanted to implement react-router to handle the navigation.
However my components now need an extra parent. And i don't quite get it how can I pass the previously working data.
I don't want to inject huge block of code so i'd rather give you a Github link which is:
My SPA
But if you need the snippets let me know and i'll cover it.
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 a Django Rest Framework application that is fed in data from a csv. I then use React to create dashboards and Widgets from that data. I want to be able to generate a link to share a read-only version of any dashboard, much like in Google docs etc. Anyone clicking on that link will be able to see the dashboard with all the charts and analytics etc. The link can be shared much like how you share a Google Forms link. I'm not sure how to go about doing that. Any help / pointers would be appreciated. Thank you!
I think theoretically you need to use a router on your react app (e.g. https://reactrouter.com/ ).
If you're using create-react-app, you can also refer to https://create-react-app.dev/docs/adding-a-router/#:~:text=Create%20React%20App%20doesn't,is%20the%20most%20popular%20one.) .
With this you can directly read parameters on a certain page within your react app, that you can then use to build a concrete call to the backend, to retrieve the necessary data to build your dashboard.
The 'link builder' functionality most likely needs to be implemented on the backend, so you can have the necessary parameters you need to gather the necessary data, maybe by using query strings.
If you want to make it more complex, you would need to implement on the backend a kind of tokenized access, that could store the full call parameters on the backend side, and associate them with a token of some kind, that you could then provide to your clients.
e.g. : http://djangoappxpto.com/link/12345abcd points to a react page component that then executes a fetch to http://djangoappxpto.com/api/getStats/12345abcd which once received by python would internally mean something like http://djangoappxpto.com/api/generateStatsReport/?param1=a¶m2=b¶m3=w¶m4=aa .
js app that I use MEAN stack at that time I didn't know there was such of thing like mean stack. The problem im having is that I use a more common web approach for example I don't handle my routing in angular I use the traditional full page reload using node/express.js.
I have two question for the experience MEAN stack developer first does it worth it to change my routing to use angular so I can have a more traditional MEAN stack app and the second question is what would be a good file structure to my already builded application for example do i make my "/" route to send res.sendfile('./public/index.html');and then I can control the routing for my angular?
I'm just looking for any advice before I make the change. I don't think it would take me that long since I already use all the technologies.
thanks :)
You have the right idea, and I would encourage you to make the switch. First, like you said, it wouldn't take a lot of time to do. Therefore the cost of learning a new approach is minimal and you stand to lose nothing by it. I think you'll be happy with the results. Serve up a single page on / like you suggested, handle routing in angular instead of in the server, and keep your views in your /app folder, or whatever you like to use. The rest of your servers routes can serve as an API for AJAX requests for data.
Basically I'm writing an app and am using Sails, MongoDB and Node JS for the back end. I'll use Sail's API features and was wondering what would be the best way to make the app realtime.
For instance I could use AJAX to call the API and manipulate the DOM using jQuery and update the DB through $.post then let the model update the db in the backend, however I'm finding this approach quite cumbersome. Not to mention I can see the code could become quite difficult to maintain after a while.
I've been doing some research and - if I understood correctly - it seems I could use either Backbone, Angular or Knockout to manipulate the data/DOM on the front end, however I'm not sure what would be the best approach in my case nor whether any of these would indeed suit my needs:
Being able to get the data dynamically
Update the data and the DOM dynamically as the user interact with the page
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
All the above asynchronously
As I don't want this to become a heated debate on which library is best, so I would like to know only whether any of the aforementioned libraries can do what I need and which is the leanest/simplest/has the lighter learning curve.
I did similar research a while ago and when found AngularJS, just stopped looking any further.
Right to your questions:
Being able to get the data dynamically
It is pure pleasure to do it in Angular. For the very basic functionality you have got $http service which allows you to send http request and register a callback when the data arrives.
For more complicated things there are modules ngResource and Restangular (external).
Update the data and the DOM dynamically as the user interact with the page
For manipulating DOM, Angular introduced concept of directive. It is basically future of the web (Shodow DOM and Web Components) right now. At this time point, there is nothing more elegant out there.
Post the updated data dynamically with none or as minimal data transformation on the back end as possible
Yes. JSON.
All the above asynchronously.
Yes, of course.
SailsJS provides interchangeability of HTTP or socket.io connections. In your case I think sockets would be a better fit than AJAX.
I have Backbone working with pushState. It's very nice, but now I understand that I should support loading the app from any route that backbone uses. For example, if somebody enters a backboen route manually to their browser, the server should respond to that and render the page and then let backbone take over.
What I am wondering, is what is the most efficient way to handle it? Backbone recommends also bootstrapping data on initial page load to reduce ajax requests. Should I only try to bootstrap data that is necessary for that particular view or should I try to bootstrap basic collections (for example: users, settings, documents, etc)?
For the first part of your question, you could just specify a callback route (which matches everything and gives the homepage) so the user never gets a 404 (don't use that when developing the app though, it could give you some hard times debugging it if you have a real 404 when making a call to the server).
For the second one, I'd say it depends on the amounts of data you need. I'm personally developing a modular application, and unfortunately can't really bootstrap anything. I'd say it's just some advice.