I am building an Single-Page-Application where the front end is using ReactJS, and React Router.
The application shall be hosted with conventional app server either Tomcat or Weblogic (just due to whatever reason as required by our client).
My question is straight forward: in React, how could I get the application context path which is equivalent to request.getContextPath() as in jsp? I did many searching in google, but none of it could just give me a straight to the point answer. Whether react having such equivalent function? Or if I could grab this path from JSP? If so, how to grab it?
Thanks.
I had this problem as well and solved it like this:
In reactjs, when you are building your app for production, you need to run "npm run build".
To build it correctly, you need to set the homepage property in package.json to the main url of your site.
In my case I am using http://localhost:3000 for local development, and http://localhost:8080/myapp for stage testing.
That app needs to know if there is a "myapp" in the url or not. This is basically the problem of this post.
My answer is, because you need to specify the homepage property in package.json anyway, I am using this value to find my context path.
I am doing this like this:
{packageJson.homepage.substring(packageJson.homepage.lastIndexOf("/"))+"/login"}
For my test environment this returns: /login
For my stage environment this returns: /myapp/login
Maybe this helps.
Related
So I have an existing Create React Application and I want to be able to build a chrome extension to work in conjunction with it. Is there a away I can use webpack or something so that my extension kind "lives in" the React application? I want to do this because the existing application is quite large and I don't want to have to make changes (UI, api, or otherwise) twice. In my head I'm picturing it something like this:
- MyApplication/
- src/
- index.html
- App.tsx
- components/
- <bunch of other useful stuff>
- extension/
- index.html
- Extension.tsx (equivalent of App.tsx in react app)
Basically I'd be able to import whatever I need into the extension and run some command like build extension and it would bundle just the files and dependencies imported and necessary for the extension and output that to some directory I can upload to the Chrome Web Store.
I also briefly considered splitting the application into into something like MyApplication-core, MyApplication-web, and MyApplication-extension or something and just installing core in both web and extension but not sure if that's the best strategy or not. The first strategy I outlined seems simpler to maintain but I could be wrong.
Also, if there is another strategy I haven't thought of please let me know! Happy to add clarification if necessary as well! TIA!
Just build it and add manifest with required configurations. After this you will have posibility to load it as an extension.
Initially posted this on reddit but got no response.
I last used service workers a couple years ago using CRA 3
The way I understood it was, just call the register function in the index.js file and voila, it's more-or-less working.
Pass in an config object to the call to add customizability. For me, all I needed it was for calling a callback that set redux state that was being listened to on a component that notified users if a new version was available via a snackbar. It was super easy and worked well.
Now I'm trying to implement similar functionality in CRA 4 and there's a whole layer of Google's workbox api on top of it; I'm sure it's super useful and necessary for some, but for my case -- just a call back after serviceworker registration -- it's a PITA.
First my service-worker.js file wasnt being built into the public directory so was resulting in 404s.
Only way out apparently was to create a new CRA app using cra-template-pwa then copy over the relevant files, which I've done.
Now the precaching workbox plugin is complaining about not being able to find my index html file as well as other static assets (have a multi-frontend app structure where those assets are in /app/frontendapp1(2,3,...n)/)
I've tried messing with the copied over service-worker.js file in src but my changes aren't being reflected in the public/service-worker.js file ...
Every reading I'm finding is getting really into the usages of each plugin, without an overall picture of react app via CRA -> serviceworker -> workbox. Anyone able to articulate ? Also have a couple of questions:
1- how does the public/service-worker.js file get built? Auto?
2 - is there a way to configure the public url for the precaching workbox?
So I am new to React and I can currently create different functional components when I use npx create-react-app appname but if I want to "package" these files and send them to my Django's view page, what is the best way to do this? I am having some trouble with webpack configuring everything in the methods I've attempted. I am trying to create a web app. Thank you.
Basically to "deploy" Django + React app, you need to use webpack on your react project, then you store react webpacked scripts in your staticfiles directory in django. Then, you define a view that returns index.html with attached scripts {% static 'reactscripts.js' %}. Thats basically all if you want to combine theese two on simple project.
I hope thats the answer you're looking for.
[edit] Also if you would like to deploy your project (after you've figured everything out), this article may help you to do so
https://mattsegal.dev/django-spa-infrastructure.html
I'm running a micro frontend application with multiple React versions, each micro frontend repo is using lazy loading for dynamically loading its React version and it works as expected (Yay!)
The micro frontend app is structured as follows:
That being said, I am experiencing issues with the styled-components multi-versioning, and receiving the following console warning in dev mode (not in production):
For more technical details check out the example repo with the implementation.
Since the application is using CRA to simplify the configurations of webpack/babel I was wondering if there is a good way to improve the initial configuration to resolve this console warning.
I checked the docs link shared on the warning, and while I understand micro frontend wouldn't be the best way to maintain your project, we'd still like to provide this option to our users as they might need to gradually migrate their project versions, so I'm still interested in getting this console warning resolved.
Any tips or suggested solutions would be appreciated.
printed warning:
react_devtools_backend.js:2430 It looks like there are several instances of 'styled-components' initialized in this application. This may cause dynamic styles to not render properly, errors during the rehydration process, a missing theme prop, and makes your application bigger without good reason.
See https://s-c.sh/2BAXzed for more info.
I was facing the same issue and I solved it by moving all my styled components inside remote apps and exposed them from there.
I had the same issue with my micro-service application. For each micro-service I had package.json file and one global package.json for all micro-service. So, in the global package.json I added resolution, it allowed me to have only one version of styled component for my app
"resolutions": { "styled-components": "4.2.1" },
Also, I used to lerna. It can help you with your micro-service's dependencies.
I hope my answer can help you resolve your problem.
I uploaded alot of react packages. Some update caused the # to be removed from the url. Works on dev machine but not on production which runs apache. I tried all different kind of rewrite in virtual host but I can't get it to work.
I need to add the # again. Must be some option som react router package?
Sorry for not specifying exactly what react packages it is. I updated so many I don't really know which it is. Production is down cause of this so it's an emergency. I promise to clean up the question once it's back up.
react-router-dom has HashRouter component. You can use that.