{"id":50316077,"url":"https://github.com/codebydusk/ultimate-frontend-seed","last_synced_at":"2026-05-29T00:02:39.076Z","repository":{"id":109716159,"uuid":"288017107","full_name":"codebydusk/ultimate-frontend-seed","owner":"codebydusk","description":"A simple seed project to kickstart your JS development in no time!","archived":false,"fork":false,"pushed_at":"2021-08-09T09:05:31.000Z","size":457,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-05-24T10:32:19.416Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codebydusk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-08-16T20:12:22.000Z","updated_at":"2021-08-09T09:05:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"f1bb8d9e-23cf-4616-abd5-0438cc13358c","html_url":"https://github.com/codebydusk/ultimate-frontend-seed","commit_stats":null,"previous_names":["codebydusk/ultimate-frontend-seed"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/codebydusk/ultimate-frontend-seed","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebydusk%2Fultimate-frontend-seed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebydusk%2Fultimate-frontend-seed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebydusk%2Fultimate-frontend-seed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebydusk%2Fultimate-frontend-seed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codebydusk","download_url":"https://codeload.github.com/codebydusk/ultimate-frontend-seed/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codebydusk%2Fultimate-frontend-seed/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33630999,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-05-29T00:02:32.656Z","updated_at":"2026-05-29T00:02:39.070Z","avatar_url":"https://github.com/codebydusk.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Ultimate Frontend Seed\n\n[![Gulp JS](https://img.shields.io/badge/Gulp-CF4647?style=for-the-badge\u0026logo=gulp\u0026logoColor=white)](https://gulpjs.com/)\n[![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/)\n[![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![HTML5](https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white)](https://www.w3.org/html/)\n[![CSS3](https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white)](https://www.w3schools.com/css/)\n[![SASS](https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white)](https://sass-lang.com/)\n\n[![GPLv3 license](https://img.shields.io/badge/License-GPLv3-blue.svg?style=for-the-badge)](http://perso.crans.org/besson/LICENSE.html)\n[![Open Source? Yes!](https://img.shields.io/badge/Open_Source%3F-Yes!-blue?style=for-the-badge\u0026logo=gitHub\u0026logoColor=white)](https://opensource.com/resources/what-open-source/)\n![Language](https://img.shields.io/github/languages/top/dusk196/ultimate-frontend-seed?style=for-the-badge)\n![Size](https://img.shields.io/github/languages/code-size/dusk196/ultimate-frontend-seed?style=for-the-badge)\n\nA simple seed project for the beginner's to kickstart the basic frontend development in no time! Also, you can play around with the `gulpfile.js` file included and understand how it works or how to configure it as per your requirements. So, stop spending time on building the architecture \u0026 become insanely productive in minutes!\n\n\n# Why?\n\nUsing only HTML pages with CSS \u0026 Javascript can be really boring. Why? Because we need to save all the changes in HTML or CSS files \u0026 then we have to manually refresh the browser to check the changes; EVERTY TIME! If .SASS or .LESS is used for styling, then we have to compile it first manually \u0026 same for Typescript also. And guess what? Those are neither minified, nor bundled like other popular frontend frameworks. That's when the Gulp \u0026  NodeJS  comes to the picture.\n\n\n# So what's included?\n\n* Single file bundle generation for (feel free to skip whichever is not required in the development):\n  * HTML\n  * CSS\n  * SCSS\n  * LESS\n  * JS\n  * TS\n* Minifying, mangling \u0026 optimising the bundles\n* Uglifying the JS/TS files\n* A small web server with synchronization for live development\n\n\n# Prerequisite:\n\n* [Git](https://git-scm.com/) (optional; you can also download this package as .zip)\n* [Node JS](https://nodejs.org/en/)\n\nDon't know/have those in your system? No worries!\nJust download \u0026 install those from the above websites \u0026 you're good to go.\n\n\n# Getting the seed package:\n\nTake a clone of this [repository](https://github.com/dusk196/ultimate-frontend-seed/) from the above link or download as a .zip package \u0026 extract it.\n\n\n# Directory structure:\n\nThe folder structure is pretty straight forward. The main source code can be found in the `src` folder with different subfolders to differentiate between file types. The `assets` folder is to contain all the assets (i.e. audio, video, fonts etc.) required for the development. The `.browserslistrc` is to denote add some browser specific CSS prefixes. The `gulpfile.js` is responsible for the automated build generation process. Let's look into this later part of this guide. Deploy the contents of the `dist` folder in the production.\n\n```\n 📦\n ┣━📂dist\n ┣━📂src\n ┃ ┣━📂assets\n ┃ ┃ ┗━📜image.jpg\n ┃ ┣━📂css\n ┃ ┃ ┣━📜custom-css-styles1.css\n ┃ ┃ ┗━📜custom-css-styles2.css\n ┃ ┣━📂html\n ┃ ┃ ┗━📜main.html\n ┃ ┣━📂js\n ┃ ┃ ┣━📜custom-js-script1.js\n ┃ ┃ ┗━📜custom-js-script2.js\n ┃ ┣━📂less\n ┃ ┃ ┣━📜custom-less-styles1.less\n ┃ ┃ ┗━📜custom-less-styles2.less\n ┃ ┣━📂scss\n ┃ ┃ ┣━📜custom-scss-styles1.scss\n ┃ ┃ ┗━📜custom-scss-styles2.scss\n ┃ ┣━📂ts\n ┃ ┃ ┣━📜custom-ts-script1.ts\n ┃ ┃ ┗━📜custom-ts-script2.ts\n ┃ ┗━📜index.html\n ┣━📜.browserslistrc\n ┣━📜gulpfile.js\n ┗━📜package.json\n```\n\n**Note**: If you don't need a specific type of format, you can delete the subfolder freely. It will not affect the development process in any way. However, please maintain this format to add any new files.\n\n\n# Getting started:\n\n## Dependencies:\n\n* [Gulp](https://gulpjs.com/): Perform `npm install -g gulp-cli` in the command prompt/terminal\n\n## Installation:\n\nGo to the root folder of the project \u0026 perform `npm install`\n\n## Development:\n\n**Note:** All the commands must be executed in the command prompt/terminal of this project.\n\nTo simplify the entire process, the gulp tasks has been wrapped into three NPM commands as follows:\n\n* `npm run start`\n* `npm run build:dev`\n* `npm run build:prod`\n\nAlso there are two launch modes available as follows:\n\n* **Development mode**: Minify, mangling \u0026 optimization for the JS are not done for easy debugging using `debugger;` or any browser console. However, a single JS file is still generated.\n* **Production mode**: Minify, mangling \u0026 optimization are done for the JS.\n\nTask | Command\n---- | -------\n`npm run start` | Builds the entire application in *production mode*, launches the application in the default browser and monitors the entire source code to build \u0026 refresh the browser in real-time if changes are made\n`npm run build:dev` | Builds the entire application in *development mode*; which is available in the `dist` folder thereafter \u0026 ready for live deployment\n`npm run build:prod` | Builds the entire application in *production mode*; which is available in the `dist` folder thereafter \u0026 ready for live deployment\n\nBut wherever the NPM commands are executed, it clears the output directory `dist` \u0026 builds the entire application again. Now there are some `Gulp` tasks available which will execute only a particular set of things as follows:\n\nTask | Command\n---- | -------\n`gulp` | Since no gulp task is mentioned, by default it performs a production build of the entire application\n`gulp build` | Performs a build of the entire application in production mode\n`gulp build --production=true` | Performs a build of the entire application in production mode with named chunks\n`gulp dev` | Performs a build of the entire application in development mode\n`gulp watch` | Looks for changes in the entire source code to build \u0026 refresh the browser in real-time\n`gulp clean` | Delete all the files \u0026 folders in the output directory `dist`\n`gulp html` | Performs a build of all the `HTML` files available; ignores if none\n`gulp css` | Performs a build of all the `CSS` files available; ignores if none\n`gulp sass` | Performs a build of all the `SCSS` files available; ignores if none\n`gulp less` | Performs a build of all the `LESS` files available; ignores if none\n`gulp js` | Performs a build of all the `JS` files available (in production mode); ignores if none\n`gulp ts` | Performs a build of all the `TS` files available (in production mode); ignores if none\n`gulp jsdev` | Performs a build of all the `JS` files available (in development mode); ignores if none\n`gulp tsdev` | Performs a build of all the `TS` files available (in development mode); ignores if none\n\n## Deployment:\n\nDeploy the contents of the `dist` folder in any web server.\n\n\n# Limitation:\n\n* No source maps\n* No test cases\n* Deleting a file in `assets` folder doesn't reflect in the output folder in real time\n* No polyfills","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebydusk%2Fultimate-frontend-seed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodebydusk%2Fultimate-frontend-seed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodebydusk%2Fultimate-frontend-seed/lists"}