Now frontend and backend will not live togheter anymore. Frango use by default Gulp to automate your frontend tasks, creating a familiar enviroment for frontend developers who works with Django as backend framework.

First of all, dependences. This is what Frango need from your system:

• NodeJS
• NPM
• Bower
• Gulp

Install dependences:

curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
sudo apt-get install nodejs
sudo npm install -g npm 
sudo npm install -g gulp-cli bower

To start a new Django project using Frango:

pip install django
django-admin startproject --template=https://github.com/hersonls/frango/archive/master.zip myproject
cd myproject
make config

Frango come with a django frontend app witch will suport you with several features, like management command to run developement server wich will manage a BrowserSync process for you and some helpfull templatetags.

To run development server with BrowserSync proxy:

cd myproject/backend
python manage.py server

All the frontend files now live in frontend directory. The files here are famliliar to all frontend developers. The main directores is:

• static - All static files for project like: images, styles, scripts and fonts.
• templates - All project templates
• dist - All build files for production. This directory will be generated by gulp build command.
• .tmp - All runtime files generated by development server. Like output from sass and javascript from babel.

By default, frontend is automated by Gulp. This is which tasks Frango has by default:

• BrowserSync - Here's pleasure, now all your test browser will be automatically updated when any changes happen.
• sass - Compile automaticaly all sass files.
• babel - Now you can write ES6 without worry about browser support.
• autoprefixer - You don't need to remember all browser support tags, this task will add for you.
• cssnano - This task will make your css small as possible.
• eslit - If you make something wrong in your Javascript, this task will make you know about it.
• imagemin - If your image has pixel wich you don't need, this will remove for you.
• sourcemaps - You need to be remembered where your source code live, this task will create a map for you.
• wiredep - Dude, you don't need to put your dependences by yourself, this will put for in your html or sass files after execute bower install.
• uglify - This task is what you need to minify your javascript.
• useref - This task will help you concatenate your files easily.
• mocha - By default we have mocha for your tests.
• notify - Gulp will notify you when your styles or scripts have errors.

All this stuff run automatically by default in your development server.

The main gulp tasks are:

• gulp serve:django - Run BrowserSync in port 9000 as a proxy to port 8000.
• gulp serve:test - Run javascript tests using mocha by default.
• gulp serve - Run web server using BrowserSync to serve template folder and statics ( usefull for create html without run a django server ).
• gulp build - Create a distribution directory with all final files for production.

To create a distribute build you need to execute the gulp build task:

cd myproject/frontend
gulp build

This task will create a dist folder with all minified and compressed files.

• Test, test and more test.
• Feedback from frontend nation.
• Improve npm speed and a better strategy for first install of dependency in deployment proccess.
• Improve django management command for manage gulp process. Gulp process is restart always django server is restarted.
• Documentation.