{"id":15689435,"url":"https://github.com/masterkale/dts-webpack","last_synced_at":"2025-05-12T19:15:17.505Z","repository":{"id":73085932,"uuid":"67551334","full_name":"MasterKale/dts-webpack","owner":"MasterKale","description":"Django, TypeScript, SCSS, and Webpack, living together in harmony","archived":false,"fork":false,"pushed_at":"2016-09-08T18:48:01.000Z","size":19,"stargazers_count":5,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-12T19:15:12.896Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MasterKale.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-06T22:26:51.000Z","updated_at":"2023-01-03T07:19:31.000Z","dependencies_parsed_at":"2023-09-19T00:06:11.234Z","dependency_job_id":null,"html_url":"https://github.com/MasterKale/dts-webpack","commit_stats":{"total_commits":3,"total_committers":3,"mean_commits":1.0,"dds":0.6666666666666667,"last_synced_commit":"73d2ee6cf33c90288c3f595ae0ec1dafb2dfde91"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fdts-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fdts-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fdts-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MasterKale%2Fdts-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MasterKale","download_url":"https://codeload.github.com/MasterKale/dts-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253805847,"owners_count":21967054,"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":[],"created_at":"2024-10-03T18:02:12.282Z","updated_at":"2025-05-12T19:15:17.489Z","avatar_url":"https://github.com/MasterKale.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# dts-webpack\n\nThis quickstarter enables your **Django** app to leverage **TypeScript** and **SCSS** for easier front end development. It uses **Webpack** to handle the heavy lifting of transpilation, uglification, and other typical build tasks.\n\nA primary goal of this project was to enable the inclusion of these technologies without substantially changing how JS and CSS files are included within Django templates via `{% static ... %}` tags.\n\nA secondary objective was to allow for developers to group `.ts` and `.scss` files by _page_, instead of by filetype. My experience as an Angular developer inspired me to follow this methodology as it allows for a more modular directory structure that encourages code re-usability.\n\nAnd thus, **dts-webpack** was born!\n\n## Prerequisites\n\n* [npm](https://nodejs.org/en/download/)\n\n## How to use\n\nThis project involves Django front end development, so it made sense to me that webpack-related files should reside **within an existing Django app**. Typically this will be the app serving up your HTML, JS, and CSS files.\n\nTo get started, place `package.json`, `require.d.ts`, `tsconfig.json`, and `webpack.config.js` into your Django app.\n\nNext, update the following variables in `webpack.config.js`:\n\n\t/* Customize these */\n\tvar outputPath = './static';\n\tvar inputPath = './frontend/';\n\n**outputPath** is where you want webpack to drop the processed files. If, for example, you set your Django project's `STATIC_ROOT` to `os.path.join(BASE_DIR, 'static')`, then set this to `'./static'`.\n\n**inputPath** is where webpack should start looking for `.ts` and `.scss` files. We don't want to put any TypeScript or SCSS files into the `STATIC_ROOT` directory, so I created a `frontend/` directory and organize these files by page:\n\n![App Structure](./app_structure.png)\n\nThose should be all the customizations you need to make. When everything is in place, go ahead and install all the dependencies:\n\n\tnpm install\n\nWhen this finishes, you'll be good to go.\n\nWith this setup, webpack will convert `.ts` and `.scss` files into individual `.js` and `.css` files respectively. Since the files are output into the app's `static/` directory, you'll be able to include them in your Django templates as usual:\n\n\t{% extends 'base.html' %}\n\t{% load static %}\n\n\t{% block styles %}\n\t\u003clink rel=\"stylesheet\" href=\"{% static 'index.css' %}\"\u003e\n\t{% endblock %}\n\n\t{% block scripts %}\n\t\u003cscript src=\"{% static 'index.js' %}\"\u003e\u003c/script\u003e\n\t{% endblock %}\n\n\t{% block content %}\n\t\u003cdiv class=\"index\"\u003e\n\t\t\u003ch3\u003eHello\u003c/h3\u003e\n\t\t\u003ca href=\"{% url 'website:about' %}\"\u003eAbout\u003c/a\u003e\n\t\u003c/div\u003e\n\t{% endblock %}\n\n## Additional notes\n\nA couple of additional scripts are included in `package.json`:\n\n* `npm start` will launch webpack in watch mode with more verbose error output.\n* `npm build` will have webpack build all TypeScript and SCSS files, then run Django's `collectstatic` command.\n\t* This command assumes that your virtual environment is located in your root Django project folder as `venv/`\n* `npm build-win` will do the same thing, but on Windows.\n\n## TODO\n\n* Incorporate unit testing for TypeScript files","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterkale%2Fdts-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmasterkale%2Fdts-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmasterkale%2Fdts-webpack/lists"}