I'm trying to integrate Rollbar into my ReactJS project. I was able to follow the setup instructions at https://docs.rollbar.com/docs/react and now want to upload my source maps. I have been referring to https://docs.rollbar.com/docs/source-maps/ , where it seems there is only one minified_url and source_map that can be applied, but my build/static/js folder has multiple of those. Which ones should I provide or is there a way to circumvent this problem?
The API endpoint accepts one source map (and therefore minified URL) at a time, so you need to run curl for each source map.
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.
I'm using "react-i18next" to translate my Website and the translation files are in "/public/locales/{en|fr}/translation.json".
Problem: the files are cached and therefore when I update the translation values, the changes are not applied except if I clean my browser caches.
I guess, the solution is to add a hash in the name of these translation files during the start/build. This is what React already does for files in '/src' folder. How can I achieve that ? It seems that 'react-scripts start/build' abstract all the Webpack configuration.
You can host your translations on a dedicated path with the help of i18next-http-backend, like described here.
Alternatively, you could also make use of a professional CDN service like locize and fetch the translations via i18next-locize-backend, like described here.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
We're attempting to create a PHP Laravel application using ReactJS as the view for each page. Laravel handles the routing and the presenting of each view. Each view loads a react js bundle.js file. Each bundle.js file is custom to that view and inside contains the react components needed for that view (screen). What were finding out is that each bundle.js file is about 4MB because each contain its dependencies as well as the components. Also were still trying to figure out how to share a component such as a TableComponent.js file across multiple views but have been so far unsuccessful.
Are we architecting this totally wrong? Should there always be only one bundle.js file for the application as a whole?
Or are there good fixes to remove the dependencies from each bundle.js file in a single dependency js file that gets loaded for all views?
Is there a good way to reuse ReactJS components accross multiple bundle.js files ?
Sounds like a perfect case to use Webpack which is an amazing bundling tool, here is an example on how to build multiple entries(pages):
https://webpack.github.io/docs/multiple-entry-points.html
You just write your entry point code, and webpack will figure out the details on how to build shared dependencies of different entries(pages) into a common bundle.
https://github.com/eiriklv/react-masonry-mixin/blob/master/README.md
The above example shows the simple steps to get masonry-mixin working on node-js.
What solutions are available to enable my react component to use this plugin within a normal webpage? I would like a solution that has the least amount of 3rd party software to get working.
The require statement is not available without npm from what I understand.
Require statements can be used in client-side using a preprocessor called Browserify.
In order to use Browserify, you have to have one main .js file from which all your other files are loaded via require statements (however tangentially). You then run the Browserify command to parse and bundle it all into one file:
$ browserify main.js > bundle.js
I've personally used react-masonry-mixin, and this is the approach I use (although automated with Gulp).