Django how to deploy css and javascript - javascript

What the best way to organize and deploy java-script and css files in django ? The main idea is rather simple - in debug mode use a lot of JS's and in production only one minified java-script . I am think that I 'am inventing a bicycle, trying to reorganize my old project this way, and should be some well known solution for this problem.
Seems I have found what I need - django-pipeline

See Managing static files in official documentation.
In short:
When debugging you can ask Django to serve these files by himself (just put them in one directory and configure STATICFILES_DIRS).
When going into production stage, you should use a real webserver like Apache. (see Deploying static files)

You could collect all static files in a folder (https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/) and then run requirejs optimiser to minify and merge the js files (http://requirejs.org/docs/optimization.html).

Related

How to deploy on apache http server once you have your angular2 application bundled with gulp

I've been wasting a lot of time trying to learn how to deploy angular 2. I tried looking around how to do it on tomcat, because that's what I was ordered to do, but turns out tomcat isn't really used for this, is more java and jsp oriented, so I've read is better to use Apache HTTP server instead.
I just installed Apache server, and I just installed npm with gulp ( https://github.com/swirlycheetah/generator-angular2 ), and everything works fine: I can run my app on localhost:3030 with gulp but I now want to test it with Apache,
I've tried several things (since I haven't seen one single place explaining this, maybe it's a very basic thing to do?):
Configure apache .conf file to change the htdocs to a folder I've created. I've tested this works, I see the result on screen when I access localhost.
Compiled everything, got a folder called build with all my files changed to .js extention, so I figured, that must be it. I copied all the files in there, the lib folder created, and index.html and css files. Doesn't work.
Tried several combinations of picking some files that I figured would be necessary and not others. Doesn't work.
Copied the whole project that I've tested with gulp, with eclipse etc that works, including .ts and .d.ts files, which I've read shouldn't be there and are not necessary, and it works.
So I would like to know how is this really done, because I feel like I'm making no improvements. After reading post after post and blog after blog about I simply needed to transpile .ts files to .js, and simply put that javascript files on "some" folder the server uses, it would work. Not only it doesn't but when I use the original .ts files it does.
What might be going on and more important, how is this deployment (I guess it's called something else since I can't find much anything) properly done?
Make sure your .js file paths in your index.html page are correct. When you generate .js files in a folder(like build), your index.html may keep source paths for those .js files are like src="inline.js". So when you access index.html in build folder - localhost/build, it looks for those .js files in localhost only not localhost/build. Try to update source path of those .js files to /build/.
src="/build/inline.js".
you can do that using proxy option in Browser Sync..
proxy option link
I didn't try it but may be it will help you.

Angular App performance with one script file vs many script files

I am working on large scale web app using AngularJs as front-end and Laravel RESTful API as back-end
Currently I am using gulp to concatenate all script files in one file including angular libraries and all modules and controllers and it's about 46,000 line of code.
Is this a good approach regrading performance?, or I've to include all script files separately.
Also Is concatenating some files and including the others is a good approach?
Thanks in advance!
Yes it is a standard approach for production
For development keep seperate files so debugging is a lot easier.
For production it is highly advisable to combine all the files and minify it.
Infact if you use webpack you can have all css , js files in one bundle
Webpack is awesome tool. Gulp would also do the job.

Can Webstorm automatically include project js files in html, or merge them into one?

I am using Webstorm a start a angularjs project. I've created a lot of *.js files. I have the include them using the tag one by one in the html files. whenever I created a new js file, I have to create the script tag.
The things I needed is just like gulp-concat, but without minifying. minified code are hard to debug.
Can anyone help on this? Thanks!
WebStorm doesn't have any built-in functions for combining files... But there are plenty of different tools on the web - plus you can create your own batch files for this.
I can suggest using Grunt grunt-contrib-concat task (https://github.com/gruntjs/grunt-contrib-concat). It supports merging files. You can run the task using Node.js run configuration, or configure it as a file watcher, or use Grunt console.
Browserify (http://browserify.org/) is one more way to go - it allows using commonjs-style syntax when developing front-end applications, combining the files into a single file for production
Or, try Webpack (https://webpack.github.io/) - it's a modern powerful module bundler

Using Grunt/Gulp with PHP Framework

So I just started learning Laravel, and I want to build something cool with it. I've been working mostly with frontend development, particularly AngularJS, and started using RequireJS recently.
I like the way Yeoman generators set up front-end applications as far as the directory structure, (i.e. /app, /test, /dist) and would like to continue using this structure, but I want to pull it into the overall application. I also like that in most cases, the application uses unbuilt files (particularly JS) for development because it cuts down on waiting for processes.
How can I set up and structure my Laravel (or any other framework) application and templates to use a similar directory/build setup for files? The problem I keep getting stuck on is using unbuilt/uncompressed files for development, as well as a clean separation of my source vs. built front-end files.
Since starting with Laravel I have tried all sorts of Asset Management tools and methods. I ended up using Stolz/Assets, an ultra-simple-to-use assets management PHP library that can be installed with composer. It is not an ideal tool as there are some issues when minifying (particularly CSS.)
Like you though I really needed neatly compiled and minified js/css assets for production.
After much research I have ended up using Gulp.js after reading this blog post (http://www.abishek.me/using-gulpjs-with-your-laravel-application/). I immediately downloaded and installed Gulp.js and created a gulp file with my own directory structure in it. I was up and running within minutes. I have since gone on to modify my gulp file so it now compiles SASS, minifies and compresses both CSS and JS for production.
I continue to use Stolz/Assets (Asset Management Library for Laravel) for serving up my files but I do not rely on this for any compiling or minification.

JavaScript styleguide on organizing files

I have worked in a web project with a heavy part on JavaScript, and I have noticed that there was no style how to use JavaScript. What unsettled me most is that everyone added files here and there, which resulted in a mess to organize and deliver them. Because this will be happen in every new project, I would like to have something like a styleguide for JavaScript. This styleguide should address the following questions:
How should JavaScript files be organized in the file system during development?
How should the JavaScript parts be separated from the HTML and other parts of the application?
How should JavaScript files be delivered in the real application, so that less code has to be loaded on each request and not too much requests have to be sent?
Is there something public available as a starting point for developing our own styleguide? What are your experiences in using your styleguide? Are developers following it easily, what are the simple and what are the difficult parts in it?
(I know, more question than one, but I'm interested in the whole story here. As a background, we have used JQuery and JSF, but I don't think that will have an impact on the answer.)
If you're doing heavy client side, you are probably going the MVC way.
So I'll answer your questions with the approach taken by the brunch. Brunch projects use MVC library Backbone.js, and have strict directory structure.
How should JavaScript files be organized in the file system during development?
src/
app/
collections/
controllers/
models/
styles/
templates/
views/
vendor/
build/
web/
config.yaml
Use Stitch to organize your files as CommonJS modules. Then you will be able to use require() to define dependency between them, as well as to combine them into one file later.
How should the JavaScript parts be separated from the HTML and other parts of the application?
build directory is used to store html; build/web is used to store javascript, images, and css.
How should JavaScript files be delivered in the real application, so that less code has to be loaded on each request and not too much requests have to be sent?
At the build stage, all JavaScript is minified and combined into one file (build/web/js/app.js), so that client will have to make only one HTTP request when he / she visits your site for the first time.
It's probably a good idea to make building process as easy as possible. Brunch does that by offering brunch watch command, which monitors filesystem for changes and builds code instantly with the help of Stitch and some other tools.
(It should be noted that during development brunch projects also use CoffeeScript as the primary language; it is transparently compiled by brunch before stitching the resulting JavaScript. However, this doesn't matter as long as file organization is concerned, and is out of scope of your question.)
For all JavaScript files definitely use a separate directory. Have as many files as possible semantically. One large constructor should correspond to a separate file. Never use filename prefixes where you can create a directory.
Unix-style directory structure is often found on GitHub:
src -- for the source JavaScript.
lib -- for libraries.
tests -- for unit tests.
bin -- for executables.
dist -- for compiled files.
For compiling we use a Makefile with targets for production and development. The production version is all of files JSHint`ed, minified and concatenated into one. The development target is generating a server-side script that includes all JavaScript files dynamically (for easy inclusion into HTML).
But generally it depends. We used a widget directory for one project. This widget directory had a set of separate widget subdirectories (e.g. slider, tabs, modal-window), each of which had the following layout (inspired by DOMLoader):
html -- for HTML templates.
css -- for CSS files necessary for the widget.
js -- for the widget JavaScript constructor.
Crockford has a few stylistic guidelines and the Yahoo exceptional performance site has details which might be useful to you.
I can recommend a book: JavaScript Patterns by Stoyan Stefanov.
I think one of the best book about javascript

Categories

Resources