I'm attempting to test our play 2.4.x application that makes heavy use of react for rendering tables and similar things. When just running the application normally, all the javascript gets processed and output properly. From our integration test phase however (using something that extends WithBrowser for selenium support in specs2 examples), the assets are clearly not available.
We get a lot of errors like the following (one for each javascript file we attempt to load):
[error] - com.gargoylesoftware.htmlunit.html.HtmlPage - Error loading JavaScript from [http://localhost:19001/assets/lib/react/react-with-addons.js]
Is there anything that can be added to tell play to process our javascript pipeline before the test/integration phases?
Are you using the IntegrationTest Configuration in SBT?
I was having the same problem and finally solved it by adding:
(managedClasspath in IntegrationTest) += (packageBin in Assets).value
to my build.sbt
This might not be the same for you, but I'm using Gulp to generate my css and js files and place them in an 'out' directory. So in order to get them picked up by the build I also had to add:
unmanagedResourceDirectories in Assets <+= baseDirectory { _ / "out" }
Related
Is there a way around the file size limitation when building with react and threejs? I am building a react module with three js using the cms-react-boilerplate. The project builds fine, but it can't upload the main.js file as it is 2.1MiB. It gives me the following error:
[ERROR] Error validating template.
[ERROR] line 0: Coded files must be smaller than 1.5 MiB
I tried to upload the file directly to the design manager but was given the same error.
I also tried to create a main.js file and paste the code into it, but was given the following error:
Error:Coded file buffer must be smaller than 2.0 MiB
I'd recommend enabling code splitting. If not, you're going to need to use a different host for the JavaScript files. Additionally – make sure you're correctly including only what you need.
Avoid:
import * as x from 'lib';
and instead do:
import { each, func, you, need } from 'lib';
This will allow bundlers such as Webpack to properly Tree Shake your dependencies.
Try compressing your files into .min.js files with this if you are done editing them.
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 :-)
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.
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).
Using Cmd 3.0.0.141, I have successfully generated a workspace and an Ext app in that workspace. The application builds correctly until I attempt to integrate the Bryntum Scheduler, where I encounter an error when I try to build:
"Failed to resolve dependency Sch.panel.SchedulerTree for file ExtCalendar.view.Tree"
the app is very simple at this point, uses Ext.application and follows the MVC pattern where I have a view defined "ExtCalendar.view.Tree" that extends 'Sch.panel.SchedulerTree". I also have models and stores that extend Bryntum classes as well, so I assume the compiler will trip over those as well, since it can't see the Sch namespace.
I've added a 'js' path to my app.json that points to the bryntum js file where 'Sch.panel.SchedulerTree' comes from. I've tried to run the 'refresh' command with the same results (Failed to resolve...). I've regenerated the bootstrap.js file manually using 'compile', but nothing from the Sch namespace ever gets added to it, despite the Brytum lib file being in the classpath.
What do I need to do in order to successfully run the 'build' command with libs like this?
Or, do I need to take a more granular approach using the 'compile' command?
With the help of the nice folks on the Sencha forums, I was able to resolve my build issues. The solution, for me, involved a shim. I added an external shim.js file to my index with as many //#require and //#define directives as needed in order to resolve the dependency issues.
According to the nice folks at Bryntum, once I upgrade from the free-trial version of the Bryntum Scheduler, I will be able to get rid of the shim and simply rely on the sencha.cfg classpath pointing at the Bryntum src.
Also, as an aside, the app.json file is not used in ExtJS apps, its inclusion in the generated files was a bug in build 141 of Cmd v3.
See this thread for more detail.