I use webpack to bundle all js for a multi page app. Is there a package that can help "routing" which script should run on page load? For example adding an atribute to body element like "data-load-entry"?
HTML Webpack Plugin can be used to generate HTML files that load your JS bundle.
By combining Generating Multiple HTML Files and Writing Your Own Templates, you should be able to generate multiple HTML files that are customized so the code in your bundle can determine what to run.
Related
Is there a way to generate a file dynamically and inject it into /pages without saving it in this directory?
For example, if I'd like to create a Next.js plugin that adds example.com/build static page with timestamp of last compilation, or list file structure of the project.
I'm using XAMPP locally to host an exisiting CMS and I want to include my react app within the CMS by using an include (this works fine for including static HTML and other PHP pages). The CMS admin page it'll be included on will look like this: http://localhost/website/administrator/
I need to place my create-react-app in a folder like this though so that the built in CMS script will include it: website\subfolder1\subfolder2\subfolder3\subfolder4\default
Currently I'm getting a blank page where I've tried to include my app. If I remove the embedded I can see the markup is being output, as in an empty div with the root class name.
I've tried setting a "homepage" property in my package.json and various combinations such as '.', and also edited the manifest site_start without luck, i can't seem to get it to render. Can anyone point me in the right direction?
Here are some steps that you could try to get the bundles building correctly, as you will need to override the default behaviour of create-react-app by ejecting.
Make a backup copy of your create-react-app
Eject, so that you will now be able to configure webpack
n
npm run eject
Go to webpack config, see the scripts section
You can change the build scripts as such as start and build
The issue seems to be where the js and css files are built to. You can change where they are output in webpack by editing the config.
See link: https://webpack.js.org/configuration
You could try changing the path for the output section to where your cms html is trying to find the bundle.
I just started working with pug and am using it for a small single page app. I'm using templates that are compiled to javascript functions that I will use in my SPA to render HTML. Using the pug-cli, I am able to generate multiple .js files that each contain the desired template function. However, instead of compiling multiple javascript files, I'd like to merge all the functions in a simple 'template.js' file that I can then call from my client app. Here's the command I'm currently using
pug -c --name-after-file -w .\views\ -o .\public\
I've googled it, searched on Stackoverflow, and also found out that the pug API itself has the pug.compileFileClient that is meant to do this perhaps for an Express app. However, I couldn't find if this functionality is implemented in the pug-cli.
There is an npm package called puglatizer that takes a directory of pug templates and compiles it into single .js file that can be included in your html file and individual render functions can be called to produce the html.
It can be used both at the command line using a CLI or imported via require can called programmatically in your build process.
I ended up using the CLI version. Simply install the package globally using:
npm install puglatizer -g
Then run puglatizer -d path/to/templates -o /path/to/output/templates.js
This will compile all the templates in the path/to/templates folder to a templates.js file in /path/to/output.
Include the generated file in your html page via the script tag.
Then you can call the template in Javascript by invoking puglatizer.TemplateFileName({data:"myData"}) where TemplateFileName is the file name of on your pug templates in the path/to/templates directory.
My application is using JSPM and SystemJS for module loading and is using angular.
My config.js file has angular map like:
"angular": "github:angular/bower-angular#1.5.8"
So when I do import angular from 'angular', I am getting the angular.js file from the Path specified in config.js file. That's good.
Now the requirement is I want to use minified third party javascript files (angular.min.js) in the app. But there is no minified files in jspm registry
So the initial loading time of my application is high because of so many large files e.g. angular.js, browser.js etc. that takes too much time to load.
I know, I can do a jspm bundle to minify all dependency files recursively which includes vendors' files also. But my questions are:
1 - Is it possible to use vendor's minified file (angular.min.js) directly with JSPM? It is good to use vendor's minified file rather than minifying them ourshelves, Isn't it?
2 - If above one is not possible, then how can I bundle only my application specific files and still able to use (bundle separately) minified angular.js file?
What is the recommended approach here?
In your config.js file you can map any file with a name and have it imported by SystemJs in the browser
So you could potentially do something like
"angular": "jspm_packages/...../angular.min" (The path to your file)
However the recommended approach would be to bundle and minify all your vendor files and as you mentioned, bundle your application specific files separately
You can do this with something like Gulp or Grunt to generate the 2 files
There are lots of examples online of how to do this but here is one to get you started
https://blog.dmbcllc.com/using-gulp-to-bundle-minify-and-cache-bust/
Once you have generated both files you add them to your html page via a script tag
<script src="Your File Path"></script>
Option 2 is the preferred approach and I would recommend spending the time to get setup as you only have to do it one time to get your head around it
I have created two script bundles for my jquery js files and bootstrap js files and a content bundle for all css files. What about my js files which i have used in my app and other application folders? Can i do bundle and minify those application's js files using bundle.config of my MVC Project? I am little confused what to bundle and what not to bundle and what project structure to follow ? Any help will be highly appreciated. Does bundle.config automatically does the minification of files?
You can create bundles per view, that include all the css or js for that view. You can bundle all the scripts, except the one that are pulled from cdn. The minification do not happen by default, you need to set BundleTable.EnableOptimizations = true;.
Try to obtain the third-party libraries already minified, and put it on the scripts folder using .min.js suffix. asp will use that files instead of minify the current sources.
example:
jquery.signalR-2.2.0.js // this on the bundle
jquery.signalR-2.2.0.min.js // on optimization mode asp will use this library