Regarding js & css file bundle & minification - webforms

i never use this feature.so i am reading few article on it.some confusion created in my mind after reading a article on bundle & minification. so i would like to know & clear those confusion asking here.
1) i could understand what is bundle & minification but like to know that minifaction will be done on the fly everytime or do i need to minify any js file before saving into js folder?
2) what bundle.add() does ? does it minify first and then include the file in bundle ?
3) if the file is already minified and the name is like jquery.min.js then what will happen...any error occur ?
4) if minifaction will be done on the fly then does it occur every time when different client request any page or is it one time only process ?
5) after minification minified version will be cache by server to prevent minifaction all the time ?
6)
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
BundleTable.EnableOptimizations = true;
}
please have a look at this code
"~/Scripts/jquery-{version}.js"));
is it wild card use {}
7) i came to know that actaul version of js file will be served during debugging not minified version. is it true ? how could i see it my self when i will test my page from IDE?
looking for discussion. thanks

There is no need to minify files yourself.
bundles.Add in your example will do one of many things: In debug mode it will add the non-minified version of jquery (in this case, the scripts show up individually, not bundled). This is done for debugging purposes.
In non-debug mode, it will use the minified version, if one exists. If one doesn't exist, it will minify it for you and put it in the bundle... either alphabetically by file name or in the order you specified. It will also put known libraries in the top of the bundle (like jQuery) as needed.
No error, but in debug mode, .min files are not used.
One time process.
Same as 4. New bundle will be created when a file changes, with query string "v" to force client to download the new bundle. "The query string v has a value token that is a unique identifier used for caching. As long as the bundle doesn't change, the ASP.NET application will request the bundle using this token. If any file in the bundle changes [it] will generate a new token, guaranteeing that browser will get the latest bundle." source
Yes it is a version wild card to automatically create a jQuery bundle with the appropriate version of jQuery in your Scripts folder. Allows you to update versions of scripts without having to change your bundling code.
Debug mode will serve up the individual, non-minified files (and no .min files). You can test by setting BundleTable.EnableOptimizations = false; or by removing that line altogether and just running in Debug mode.

Related

Difference in Twig Rendering between Local <-> Staging

We have a problem on a staging system which the same code, same composer.lock, composer install done, cache flushed.
I even activated FroshDevelopmentHelper on Staging and set it to ENV=dev to be able to see more debugging infos.
On Staging:
<!-- BLOCK BEGIN base_body_inner (custom/plugins/OurTheme/src/Resources/views/storefront/base.html.twig) -->
On Local (there the feature works):
<!-- BLOCK BEGIN base_body_inner (vendor/store.shopware.com/moorlfoundation/src/Resources/views/storefront/base.html.twig)
We also ensure a consistent plugin loading order by setting the installed_at, but that is also the same order on both system
The database was also copied from Staging (just base URL changed after the local import) + rebuilt storefront and admin.
Does anybody have a pointer what else could influcence the loading order or cause such a problem?
EDIT:
I added some debug code here:
vi vendor/shopware/core/Framework/Adapter/Twig/NamespaceHierarchy/BundleHierarchyBuilder.php +52
asort($extensions);
dd($extensions); # added
This gives me different results on both systems.
Before Shopware loaded the templates according to installation date - now the TemplatePriority is used, which is in most cases 0, so my theory is, that a kind of chaotic order is constructed, if the TemplatePriority is not set anyhwere.
I am pretty sure, this new feature is the reason:
Since 6.4.13.0 it is possible to set the load order of templates using the template priority. This was a shortcomming for a while and we are very happy about this fix.
Unfortunately it breaks our workflow, where we currently hard-code the plugin installed_at date and assumed that the templates are loaded in a certain way.
Follow up: Set template priority for 3rd party plugins
See also: https://issues.shopware.com/issues/NEXT-23822

How does your workflow looks like with react.js along with backend?

I am developing a simple CRM app using Laravel 5.2 and ReactJS. Previously I was using them independently, but now I want to try to combine them together so Laravel will be my API and front-end will be all in ReactJS.
As far as I know when my app is ready to go live I will serve my master view which includes root div, bundle.js etc.
When it comes to development part I am a little confused. I really love react hot reload, but for now I had to do a little walk around to make this works.
I run two servers side by side. Webpack-dev-server and homestead, so I am able to do calls to my API. But I also have to have additional index.html for webpack-dev-server. When i change something in my index.blade.php view I also need to change this in this index.html and this is a little bit of pain.
Is there any cool trick that I can apply to improve my workflow? If there is any example please provide me a link, because I wasn't able to find one. There are many small todo apps that doesn't really solve my problem.
PS. Currently I am using this approach https://github.com/sexyoung/laravel-react-webpack
#UPDATE
Well I think I have found an acceptable solution. I will stick with webpack server configuration that I have provided in my question (it is really great cause you can use hot reload + you api calls are redirected to backend port, so instead of localhost:8080/api/user... you call /api/user/1), but I have also developed a simple elixir extension that compiles php to simple static HTML page which solves the problem of editing two index files (we all know programmers are lazy).
var php2html = require("gulp-php2html");
var gulp = require("gulp");
var rename = require("gulp-rename");
var Task = elixir.Task;
elixir.extend("php2html", function (message) {
new Task("php2html", function () {
return gulp.src("./resources/views/index.blade.php")
.pipe(php2html())
.pipe(rename('index.html'))
.pipe(gulp.dest("./"));
})
.watch("resources/views/index.blade.php");
});
elixir(function (mix) {
mix.sass('app.scss');
mix.php2html();
});
So at the moment I have two index files:
index.blade.php in resources/views which is resolved by the router on production
index.html in root of my application folder which is used by webpack-dev-server for development
and of course now these files are sync cause of gulp watch :)
If there is any better approach let me know guys.
I have usually solved this problem (duplicated index.html/php file) using this webpack plugin: https://github.com/ampedandwired/html-webpack-plugin
The idea is the opposite of yours I think. Instead of compiling your php files into static html, you can use the HtmlWebpack plugin to output a index.tmpl.php file (or whatever extension you need) using the filename configuration option. Normally I set that path to be the templates folder of my application server.
I believe this approach is generally easier than doing the other way round.
Using this plugin has other benefits, such as automatic bundle script tags injection depending on your Webpack output config, and automatic cache-bursting file hash added to the script tag urls.

Play! Framework 2.1.3 pdf problems

so I am working on a school project in which we have designed a web application that takes in much user info and creates a pdf then should display that pdf to the user so they can print it off or save it. We are using Play! Framework 2.1.3 as our framework and server and Java for the server side. I create the pdf with Apache's PDFbox library. Every thing works as it should in development mode ie launching it on a localhost with plays run command. the issue is when we put it up to the server and launch with plays start command I it seems to take a snapshot of the directory (or at least the assets/public folder) which is where I am housing the output.pdf file/s (i have attempted to move the file elsewhere but that still seems to result in a 404 error). Initially I believed this to be something with liunx machine we were deploying to which was creating a caching problem and have tried many of the tricks to defeat the browser from caching the pdf
like using javascript to append on a time stamp to the filename,
using this cache-control directive in the play! documentation,
"assets.cache./public/stylesheets/output.pdf"="max-age=0",
then I tried to just save the pdf as a different filename each time and pass back the name of that file and call it directly through the file structure in the HTML
which also works fine with the run command but not the start.
finally I came to the conclusion that when the start command is issued it balls up the files so only the files that are there when the start command is issued can be seen.
I read the documentation here
http://www.playframework.com/documentation/2.1.x/Production
which then I noticed this part
When you run the start command, Play forks a new JVM and runs the
default Netty HTTP server. The standard output stream is redirected to
the Play console, so you can monitor its status.
so it looks like the fact that it forks a new JVM is what is causing my pain.
so my question really is can this be gotten around in some way that a web app can create and display a pdf form? (if I cannot get this to work my only solution
that I can see is that I will have to simulate the form with HTML and fill it out from there) --which I really think is a bad way to do this.
this seems like something that should have a solution but I cannot seem to find or come up with one please help.
i have looked here:
http://www.playframework.com/documentation/2.1.x/JavaStream
the answer may be in there but Im not getting it to work I am pretty novice with this Play! Framework still
You are trying to deliver the generated PDF file to the user by placing it in the assets directory, and putting a link to it in the HTML. This works in development mode because Play finds the assets in the directory. It won't work in production because the project is wrapped up into a jar file when you do play dist, and the contents of the jar file can't be modified by the Play application. (In dev mode, Play has a classpath entry for the directory. In production, the classpath points to the jar file).
You are on the right lines with JavaStream. The way forward is:
Generate the PDF somewhere in your local filesystem (I recommend the temp directory).
Write a new Action in your Application object that opens the file you generated, and serves it instead of a web page.
Check out the Play docs for serving files. This approach also has the advantage that you can specify the filename that the user sees. There is an overloaded function Controller.ok(File file, String filename) for doing this. (When you generate the file, you should give it a unique name, otherwise each request will overwrite the file from a previous request. But you don't want the user to see the unique name).

Dojo File Caching in Worklight

When using Dojo file caching with Worklight receiving a 404 Error when running in Simulator. It appears the file being loaded is not being copied from the common area to the device. Is there something else I need to define in my project to make that happen? There must be a convention and I wanted to follow it going forward as I expect to have more template files in the project.
My define statement in a .js file:
define(["dojo/_base/lang", "dijit/layout/ContentPane", "dojo/dom", "dojo/text!./templates/Order.html"], function(lang, ContentPane, dom, template){
...
var cp1 = new ContentPane({
title:"Order",
content: lang.replace(template, someJson)
}).placeAt("temp");
My folder structure:
In the common/js directory I have the above code in a .js file and I have a templates folder to keep the Order.html and I would expect to have other template files stored there in the future.
Error on the console:
GET http://localhost:10080/DojoProject/apps/services/preview/DojoApp/windowsphone8/1.0/default/layers/templates/Order.html 404 (Not Found)
It seems that the way you are specifying the path, browser tries to find the file in the "layers" folder which is sibling to "templates".
Have you tried to modify the "dojo/text!./templates/Order.html" to something like: "dojo/text!./../templates/Order.html" to navigate one level up, then go into the templates folder?
I'm not sure this will work, but I think it worths a try.

PDFkit rails3.1 and development env

My Rails 3.1 app is using PDFkit to render specific pages, and I'm running into (what seems like) a common problem with where trying to generate the pdf is causing the process to hang.
I found this solution here on stackoverflow: rails 3 and PDFkit. Where I add a config.threadsafe! entry in my development.rb file and this works BUT it requires that for every change anywhere in the app I have to stop and restart my server to see my changes. NOT acceptable from a workflow - I'm currently setting up the styling for the PDF pages, and it's painfully slow process having to do this.
I also found the same issue reported here: https://github.com/jdpace/PDFKit/issues/110, and the issue points to this workaround: http://jguimont.com/post/2627758108/pdfkit-and-its-middleware-on-heroku.
ActionController::Base.asset_host = Proc.new { |source, request|
if request.env["REQUEST_PATH"].include? ".pdf"
"file://#{Rails.root.join('public')}"
else
"#{request.protocol}#{request.host_with_port}"
end
}
This removes the need to restart the change, BUT now when I load the pdf it's without the styles rendered from the asset pipeline because it's taking the assets from the public directory. I think I could work with this solution if I could know how to create the stylesheets for the pdf templates in the public folder. IS anyone developing with PDFKit and Rails3.1 where this is all working in sync?
Any help would be greatly appreciated!
Thanks!
Tony
Here is the setup I am using:
I run a second instance of rails server with rails server -p 3001 -e test which will handle my assets for the PDF. The server will print the assets requests as they come in, so I can check that everything works as expected.
I use the following asset_host in my config/environments/development file:
config.action_controller.asset_host = ->(source, request = nil){
"http://localhost:3001" if request && request.env['REQUEST_PATH'].include?(".pdf")
}
If you are using Pow, you can use multiple workers. Add this to your ~/.powconfig
export POW_WORKERS=3
(taken from Pow manual)
There's a problem with pdfkit in Rails 3.1. See my answer to this related question:
pdfkit does not style pdfs

Resources