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).
Related
We have an ExtJS modern app. We would like to use cmd to minimize/compress our code into a single .js file - effectively doing what a non Ext app would do with other minifiers like uglifyjs or terser.
I believed we could achieve this with the compile command such as:
sencha -sdk ext-7.1.0.46 compile -cl=myclassfolder -inp=ES6 concat outfile.js
However, it complains that it can't find the Ext classes with an error like:
[ERR] Failed to resolve dependency Ext.data.Model for file myapp.model.mymodel
[ERR] Unknown definition for dependency : Ext.data.Model
It seems to be the basic task of extending Ext.data.Model it doesn't like and very much feels like I simply need to reference the extJS class structure correctly for this to work, but can't figure out the command line to make it happen (I somewhat assumed that the sdk reference would fix this).
Is this possible?
Ok, to help anyone who is facing the same problem and wants to compress/minify their ExtJS but without creating a full sencha app.
The command is fairly simple and the answer is to include the path to your dependent js files in the -cl (or -classpath) argument, then exlude the Ext namespace:
sencha -sdk stack/Sencha/ext-7.2.0 compile -cl=ext-modern-all.js,packages/ux/modern/ux.js,myclassfolder -inp=ES6 exclude -namespace Ext and concat outfile.js
You can then use terser or your preferred minify tools to minify/mangle the output (or add the compress command to the above to allow cmd to minify also). It's a reasonable way to build your ExtJS code into several manageable extjs "modules" which can be loaded when needed (or when security allows) rather than the "big bang" approach of cmd.
This will produce a single js file, correctly ordered, the only issue is that it includes the Ext microloader code, which it adds by default. I have not managed to have the compiler not inlcude the microloader, however you can effectively disable it by defining the microloader yourself between the load of your ext-all.js file and your newly created file by using something like this is another file or inline script tag:
Ext.Microloader = {
run: function(){}
};
I know there aren't many folks left using ExtJS, hope this helps someone at some point, at worst case it allows a bit more control of the ExtJS build process.
I've been trying to get Parcel Bundler to code split a ReactJS project for a while with no success, this project also used TypeScript, ReactRouter and MobX for its state management.
I've been meaning to put a boilerplate sample together and ask for help here for a while but not got round to it.
After a quick google earlier today, I came across a ready made boilerplate on Github which uses the same setup and also does not code split...
https://github.com/wenpengfei/parcel-typescript-react-boilerplate
Once compiled and ran, it just ends up with one big .js file in the dist folder, the idea behind code splitting is to create several smaller .js files per 'area' of the web application right?
Is this even possible with this combination of libraries/frameworks? If not, is my only option to go down the webpack route instead (if that will work?)?
For client side code splitting just use import + React.lazy. Should work out of the box.
To support server-side code splitting (or client-side code splitting with server-side rendering) - https://github.com/theKashey/react-imported-component is the only choice for today.
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.
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" }
A typical extjs example application includes the extjs library by referencing files such as:
ext-all.css
ext-all.js
What's the 'rails 3.1 way' of including these files, noting that they reference hundreds? of files in subdirectories
(e.g. ext-4.0.2/resources/themes/stylesheets/ext4/default/_all.scss)
and there are relative paths:
(e.g. background-image:url('../../resources/themes/images/default/shared/shadow.png'))
I'm tried numerous combinations of require_tree et al., but can't seem to get it to work.
I'm wondering if I need to mess w/ 'provide', but I can't seem to find the documentation I need.
What you want is for this file to compile via the Rails asset pipeline:
resources/themes/templates/resources/sass/my-ext-theme.scss
To get this to work, I learned a few things the hard way:
ExtJS uses SASS to compile (so does Rails) and Compass, which includes blueprint and compass CSS kits. Compass doesn't work with rails, you need to use the gem "compass-rails", which doesn't include the CSS toolkits. Only the main compass gem has these toolkits, and it's a dependency for compass-rails so you should get them if you bundle compass-rails, they need to be in your sass.load_paths config. If you include the "compass" gem without compass-rails you will have strange errors and become an expert at the rails asset pipeline as you try to solve them!
ExtJS uses an older version of SASS, the newer one Rails uses doesn't like having functions and mixins defined inside of modules. To fix this, look at the errors it's giving you (always a function or mixin definition) and move them to _functions or _mixins files.
(more info: getting error after ugrading to sass-3.1.8)
Here's how to get up and running:
Put this into your config/application.rb:
# Set up our ExtJS SASS build environment
config.sass.load_paths << "#{Rails.root}/vendor/assets/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/compass/stylesheets"
config.sass.load_paths << "#{Rails.root}/vendor/assets/frameworks/blueprint/stylesheets"
Put the ExtJS stylesheets (the ext4/default directory in the SDK) here:
vendor/assets/stylesheets/ext4/default/
Put my-ext-theme.scss into app/assets/stylesheets and use it like you normally would with rails. It will call this code:
#import 'ext4/default/all';
That will bring in all of the ExtJS definitions, and you should be on your way.
Jeff! Take a look at my answer here, I think your problem is the same.