I have a react application running on example.com/web, which has menus like register, login, and various other pages mainly static which describe what this app is all about. Now once someone logs in I have example.com/app which opens the application, the dashboard, forms, and again many other things related to the application.
I have set different layouts for example.com/web and exapmle.com/app. and when people visit example.com they are auto-redirected to example.com/web
I have implemented lazy loading for /web and /app.
The problem is when someone visits example.com the serviceworker downloads all the files, which may not be required for people visiting the page only to check about the application.
Now I am looking for something where serviceworker downloads only web components and if required then app components. Maybe something like to break this whole react application into two different applications. I can not remove the serviceworker. I'm also not getting any idea what best can be done to reduce the network call. Do let me know what best can be done. I check a few examples on the subdomain and I think it is again a single react app and serviceworker will download all the files.
And if I break it into two different apps how will I pass authenticated props from the login page which is in /web to /app.
Any help?
Related
I have a request from a client to implement deep linking in our React application whereby clicking a link will take them directly into the installed app (potentially to a certain point but not sure on that yet).
To my understanding react-native and react-navigation both handle this as part of a feature set within "Linking" that they offer. However it seems excessive to import a framework just for deep linking (perhaps not though).
After googling I can only really find references to deep linking on react-native or react-navigation.
What is my best course of action?
Let's get to some basics first, then it will be clear.
In modern SPA's, say with React, it's common for the SPA to handle navigation itself. You need to use browser's history API. It's because your SPA is just a single index.html with bunch of js code, so it sort of virtual, every page is constructed by your app. In order to not reinvent a wheel, its easier to use some library for that, say react-router-dom.
But then everything works as expected, and you have deployed your app. When user wants to get some deep page, say, https://my-awesome-app.com/deep/page/1, browser will just send a request to a server, asking: "Please, server, give me a page 1.html, in folder page, in folder deep". But server doesn't have that file, because it has literally one index.html, because its a SPA application. Then we need to tell the server to re-write all deep routes to index html, here is an example for my app hosted on Netlify:
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
When user will ask for that page, server will 'redirect' that request to the index.html and my react-router-dom will figure out which 'PageComponent' to render based on that path.
So, you can implement routing in your app yourself, probably using browser's History API, but I guess it might be easier to use library. But it's your call.
On the other hand if your app is not an SPA, the story might be different, because say in NextJS routing is implemented in framework itself, and if used deep linking would require different setup depending on how app is deployed.
Deep-linking is handled largely by Apple and Google server-side
https://www.adjust.com/blog/dive-into-deeplinking/
React-native provides extended functionality for deep-linking within mobile apps but normal web-applications there is no need to implement it there. Use universal links or Google specific links as standard linking within your web app to enable deep linking
I am using django on the backend and on the front end I am using react with create-react-app.
I have different apps on my web page that are somewhat independent from each other:
mydomainname/home
mydomainname/foo
mydomainname/bar
They are all somewhat connected but logically completely different which is why I separated them.
Is this handled with only one create-react-app and one index.html file in the build folder? And something like the browser router package for the different apps?
For example, if I look at the Facebook homepage (in case I want to build that with React) I understand that my news feed and my profile page and other people's pages are all connected and share similar components which is why it would make sense to have one index.html file.
But if I create a new public page (e.g. for a business figure), are all these components and functionalities handled in the same one index.html file? I could imagine that this will run into memory leaks and performance issues, or is this not the case? I can't seem to find anything about that neither in the create-react-app documentation nor through google.
React is not Html. In React you have only one page named index.html in folder public. The "pages" in react are named as 'Components', so you just create components and link them to each other. The first generated example component is App (App.js) component in src folder. All the transitions (transition from one component to second) will be done in index.html file.
I want to make partially SSR web application and looking for best solution for that. I need SSR for SEO and that will only serve dynamically rendered products pages - this will be handled by NextJS.
Other part of the app is only for logged users and I don't want anybody not logged to accidentally display it (but only users data have to be secure, if anyone access by a hack those restricted pages without any user data that's ok) - for that part I've already implemented React Router with proper redirections and few routes (it's using Redux too).
Whole project was made with create-react-app. Is there a way to easily combine those two functionalities? Do I have to move everything from /src to /pages? Maybe best way would be to serve them independently and just redirect to one or another using Apache configuration?
If anybody wonders about it - currently the best solution would be to use NextJS for all of it, cause Next provides a clean way to handle static pages, CSR and SSR alongside each other.
By the default all pages are static generated or pre-rendered with partial CSR, while using getServerSideProps method allows to handle SSR, without any extra configuration.
My story:
I want to launch very quickly one page, but I am really bad at CSS. I know react and wanted to get better there so I bought two application templates from themeforest. One is landing page, another one is kind of a dashboard page. All styled, independently works great. Now I would like to integrate them into a one application, so when user clicks on "login" in landing page he will be redirected to the dashboard application login page. Both applications are indepented. Both are made using CRA. Backed will be writted in .NET.
How should I do this? What are the best ways to do this? I could "copy-paste" some of the files of the smaller application (landing) to the dashboard app and change the root of the react, this is doable but will take some time to move everything, and build properly. Maybe there is another way that you can think of?
Most of the react developers(not good in CSS) will be in a similar situation. There is no readily available solution I can think of. I suggest you to manually go through the landing.html and dashbaord.html and split it into 2 react components minimum. You mentioned that you know react, so it will be easy for you. The toughest part for you will be resolving CSS class conflicts. The two HTML files might be using the same classes. Here you need to go case by case or change the names of the CSS class for either landing-style.css file or dashboard-style.css file.
Time to learn CSS basics. Good luck with your CSS learning.
Why to merge the codebase, instead deploy them separately.
For example:
Let's deploy landing page to www.example.com and dashboard to app.example.com.
Once the user clicks on signup/sign-in just redirect to app.example.com.
This way you can focus on important aspects of each application.
Landing page for SEO and dashboard for new features.
So I'm trying to deploy my first React application live. It is my portfolio webiste. Anyways, everything is working fine except for my routes. Locally, Everything works fine. However, now that I've deployed the website my routes do not work. When you click on any of the links it says the url cannot be found on the server, and it throws a 404 error.
The application is hosted by namecheap, and they said they cannot see anything wrong from their end. I just have no idea what could be wrong then as it all works find locally.
My website can be found at andrewschubert.website and the github repo for this can be found at https://github.com/theschubinator/my-portfolio If anyone has any ideas what I'm doing wrong I would greatly appreciate it!
By the way, it is a React Application. There is no database or API, just strictly front-end. The only links that are actually working are the ones that redirect you to an area outside of my application...like my blog on medium.
I can see that you've been using react-router lib for your routing. It is based on HTML5 history API, which is not supported by every host out there. If you are talking about your portfolio website and it's not so much of and issue where do you deploy it, try out some different hosts (e.g. surge is great for deploying static sites: https://surge.sh/).
React applications are single page. Routing in React means changing the components displayed when user requests a different url. You will need an api.
On every client request you return the same "index.html" which will display only one component. By creating a controller in your server you can map "/contact" to "index.html#contact" and your hashrouter can return the ContactUs component.