{"id":13538893,"url":"https://github.com/hersonls/frango","last_synced_at":"2025-12-28T22:20:43.753Z","repository":{"id":136844593,"uuid":"42983715","full_name":"hersonls/frango","owner":"hersonls","description":"Django and Gulp - Frango, a FRontend and backend djANGO project template","archived":false,"fork":false,"pushed_at":"2018-12-09T21:10:29.000Z","size":293,"stargazers_count":53,"open_issues_count":4,"forks_count":12,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-03T03:32:17.104Z","etag":null,"topics":["browsersync","django","frontend","gulp","python","sass"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hersonls.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2015-09-23T06:53:58.000Z","updated_at":"2023-04-07T00:12:52.000Z","dependencies_parsed_at":"2024-01-20T16:14:33.777Z","dependency_job_id":null,"html_url":"https://github.com/hersonls/frango","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hersonls%2Ffrango","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hersonls%2Ffrango/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hersonls%2Ffrango/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hersonls%2Ffrango/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hersonls","download_url":"https://codeload.github.com/hersonls/frango/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246763808,"owners_count":20829795,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browsersync","django","frontend","gulp","python","sass"],"created_at":"2024-08-01T09:01:17.426Z","updated_at":"2025-12-28T22:20:43.713Z","avatar_url":"https://github.com/hersonls.png","language":"Python","funding_links":[],"categories":["Python"],"sub_categories":[],"readme":"Frango - A FRontend and backend djANGO project template\n=======================================================\n\nNow frontend and backend will not live togheter anymore. Frango use by\ndefault Gulp to automate your frontend tasks, creating a familiar enviroment \nfor frontend developers who works with Django as backend framework.\n\nTest in heroku\n--------------\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n\nSystem dependences\n------------------\n\nFirst of all, dependences. This is what Frango need from your system:\n\n- NodeJS\n- NPM\n- Bower\n- Gulp \n\n### Ubuntu setup\n\nInstall dependences:\n\n```\ncurl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -\nsudo apt-get install nodejs\nsudo npm install -g npm \nsudo npm install -g gulp-cli bower\n```\n\nStart new Frango project\n------------------------\n\nTo start a new Django project using Frango:\n\n```\npip install django\ndjango-admin startproject --template=https://github.com/hersonls/frango/archive/master.zip myproject\ncd myproject\nmake config\n```\n\nBackend\n-------\n\n### Development server\n\nFrango come with a django frontend app witch will suport you\nwith several features, like management command to run developement server\nwich will manage a BrowserSync process for you and some helpfull \ntemplatetags.\n\nTo run development server with BrowserSync proxy:\n\n```\ncd myproject/backend\npython manage.py server\n```\n\nFrontend\n--------\n\nAll the frontend files now live in ```frontend``` directory. The files here are\nfamliliar to all frontend developers. The main directores is:\n\n- ***static*** - All static files for project like: images, styles, scripts and fonts.\n- ***templates*** - All project templates\n- ***dist*** - All build files for production. This directory will be generated by ```gulp build``` command.\n- ***.tmp*** - All runtime files generated by development server. Like output from sass and javascript from babel.\n\n### Frontend features\n\nBy default, frontend is automated by [Gulp](http://gulpjs.com/). This is which tasks Frango has by default:\n\n- [BrowserSync]() - Here's pleasure, now all your test browser will be automatically updated when any changes happen.\n- [sass](https://www.npmjs.com/package/gulp-sass) - Compile automaticaly all sass files.\n- [babel](https://www.npmjs.com/package/gulp-babel) - Now you can write ES6 without worry about browser support.\n- [autoprefixer](https://www.npmjs.com/package/gulp-autoprefixer) - You don't need to remember all browser support tags, this task will add for you.\n- [cssnano](https://www.npmjs.com/package/cssnano) - This task will make your css small as possible.\n- [eslit](https://www.npmjs.com/package/gulp-eslint) - If you make something wrong in your Javascript, this task will make you know about it.\n- [imagemin](https://www.npmjs.com/package/gulp-imagemin) - If your image has pixel wich you don't need, this will remove for you.\n- [sourcemaps](https://www.npmjs.com/package/gulp-sourcemaps) - You need to be remembered where your source code live, this task will create a map for you.\n- [wiredep](https://www.npmjs.com/package/gulp-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. \n- [uglify](https://www.npmjs.com/package/gulp-uglify) - This task is what you need to minify your javascript. \n- [useref](https://www.npmjs.com/package/gulp-useref) - This task will help you concatenate your files easily. \n- [mocha](https://mochajs.org/) - By default we have mocha for your tests.\n- [notify](https://www.npmjs.com/package/gulp-notify) - Gulp will notify you when your styles or scripts have errors. \n\nAll this stuff run automatically by default in your development server.\n\n### Gulp tasks\n\nThe main gulp tasks are:\n\n- ```gulp serve:django``` - Run BrowserSync in port 9000 as a proxy to port 8000.\n- ```gulp serve:test``` - Run javascript tests using mocha by default.\n- ```gulp serve``` - Run web server using BrowserSync to serve template folder and statics ( usefull for create html without run a django server ).\n- ```gulp build``` - Create a distribution directory with all final files for production. \n\n### Create a distribution build\n\nTo create a distribute build you need to execute the gulp build task:\n\n```\ncd myproject/frontend\ngulp build\n```\n\nThis task will create a ```dist``` folder with all minified and compressed files.\n\nTO-DO\n-----\n\n- Test, test and more test.\n- Feedback from frontend nation.\n- Improve npm speed and a better strategy for first install of dependency in deployment proccess.\n- Improve django management command for manage gulp process. Gulp process is restart always django\n  server is restarted.\n- Documentation.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhersonls%2Ffrango","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhersonls%2Ffrango","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhersonls%2Ffrango/lists"}