{"id":14976391,"url":"https://github.com/tansudasli/html5-boilerplate","last_synced_at":"2026-03-04T07:04:50.936Z","repository":{"id":43566667,"uuid":"203375040","full_name":"tansudasli/html5-boilerplate","owner":"tansudasli","description":"html boilerplate w/ pwa + firebase deployment specific + scss + customizable material web components etc. Useful to bootstrap www (static parts) ","archived":false,"fork":false,"pushed_at":"2022-12-11T02:56:46.000Z","size":1853,"stargazers_count":0,"open_issues_count":27,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-01T04:24:37.859Z","etag":null,"topics":["firebase-hosting","html-css-javascript","html5-boilerplate","material-theming","material-web-components","npm","pwa","scss","webpack3"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/tansudasli.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}},"created_at":"2019-08-20T12:48:07.000Z","updated_at":"2022-09-17T11:42:06.000Z","dependencies_parsed_at":"2022-08-22T22:40:25.499Z","dependency_job_id":null,"html_url":"https://github.com/tansudasli/html5-boilerplate","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/tansudasli/html5-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tansudasli%2Fhtml5-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tansudasli%2Fhtml5-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tansudasli%2Fhtml5-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tansudasli%2Fhtml5-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tansudasli","download_url":"https://codeload.github.com/tansudasli/html5-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tansudasli%2Fhtml5-boilerplate/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30075425,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T05:31:57.858Z","status":"ssl_error","status_checked_at":"2026-03-04T05:31:38.462Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["firebase-hosting","html-css-javascript","html5-boilerplate","material-theming","material-web-components","npm","pwa","scss","webpack3"],"created_at":"2024-09-24T13:53:49.148Z","updated_at":"2026-03-04T07:04:50.914Z","avatar_url":"https://github.com/tansudasli.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html5-boilerplate\n\nPure *Html5 Boilerplate* w/ \n- [x] Material icon css\n- [x] Material components used w/ flex\n- [x] basic PWA capabilities\n- [x] scss w/ npm to css generation\n- [x] Tiles capabilities in internet explorer\n- [x] optimized normalizer instead of css resets or normalizer\n- [x] add to home screen in safari browser\n- [x] add to home screen in chrome browser for android\n- [x] firebase hosting deployment\n- [x] customize Material Theming (typography, shape and color)\n\nThis can be used for **static html* parts of an angular material app. So It will be SEO friendly due to separating www and web-app parts.\n\n## How to start\n\nAfter fork, \n\n1. Get packages: such as to generate scss-2-css w/ node-sass\n    - `npm install`\n        - webpack: **Bundles Sass and JavaScript, Builds html etc.**\n            - webpack-dev-server: Development server\n            - sass-loader: Loads a Sass file and compiles it to CSS\n            - node-sass: Provides binding for Node.js to Sass, peer dependency to sass-loader\n            - css-loader: Resolves CSS @import and url() paths\n            - extract-loader: Extracts the CSS into a .css file\n            - file-loader: Serves the .css file as a public URL\n        - webpack plugins\n            - html-webpack-plugin: **generate index.html**\n            - copy-webpack-plugin: **copy files under dist/ folder**\n            - workbox-webpack-plugin: **generate service-worker.js using workbox-config.js**.\n        - in order to add **vendor specific styles**\n            - autoprefixer: Parses CSS and adds vendor prefixes to CSS rules\n            - postcss-loader: Loader for Webpack used in conjunction with autoprefixer\n        - material-components-web: to **customize material theming**\n        - babel: **bundle ES2015 into standart JS**\n            - @babel/core\n            - babel-loader: Compiles JavaScript files using babel\n            - @babel/preset-env: Preset for compiling es2015\n    - `npm install -g workbox-cli`, then `workbox generateSW workbox-config.js` to update service-worker.js locally. [Read more](https://developers.google.com/web/tools/workbox/modules/workbox-cli)\n\n\n## How to Customize\n\n1. Use `material.theme.scss` to change variables w/ your colors, shape requirements etc.\n2. Prepare assets\n   - get a transparent logo: https://onlinepngtools.com/create-transparent-png\n   - then, generate all icons: https://realfavicongenerator.net/ or use their cli `npm install -g cli-real-favicon`\n   - then, generate apple splash screens: https://appsco.pe/developer/splash-screens\n2. then, start changing index.html and creating new html files if needed!\n\n- webpack.config.js: webpack configuration for scss-2-css, es2015js-2-js, copy some files, generate html files etc...\n- style.scss: contains all .scss files, and imports below scss files. Webpack converts it and all other scss-2-css into **bundle.css**\n    - material.theme.scss: all global variables to change material design look and feel. (colors, shapes etc.)\n    - normalize.scss: to reset browser specific css things. optimized version of `npm install normalizer`.\n    - material.layout.scss: specific to the layout\n    - material.components.scss : specific to the material components\n- main.js: access components w/ `querySelectorAll('.className')` then do whatever you want!. Webpack converts it into **bundle.js**\n    - It has, routing table for dev, release, demo and prod redirections. So change w/ your own urls. And here, naming is critical. It parses domainNames to route.\n- icons : `npm install -g cli-real-favicon` to generate all favicons for ms, ios, android. You just need 1 high resolution transparent .png file\n    - logo-transparent.png **master png file**\n    - favicon-description.json : parameters for favicon generation. Change w/ your values\n    - `favicon-description-generate.sh` : generation script. creates `.xyz` folder and all images. Copy them manually to related paths!\n    - assets/icons/*.png\n    - favicon*\n    - apple-touch*\n- dist/: `npm run build` creates for deployments. Then `copy-webpack-plugin` to copy some files into it. This part is critical for firbase, cause it need to see 404.html and index.html and related files to them!\n    - bundle.js\n    - bundle.css\n\n## How to Run\n\n- for development only and serve from local run `npm run start`\n- for production, `npm run build` to create dist/ folder. Then deploy it to firebase w/ `./deploy-to-` scripts or somewhere else\n\n## How to Deploy\n\nto deploy **Firebase**: 2 files are critical. `firebase init` creates them. **You should customize them too**.\n\n- .firebaserc: configurations about targets, firebase projects ids, and hostings. In a real scenario, you have more than one web sites in a hosting. \n- firebase.json: Deployment config to firebase\n- deployment-to-development.sh, deployment-to-release.sh, deployment-to-demo.sh, deployment-to-production.sh: To decrease deployment risks such as firebase users, projects and related websites etc..\n    - In a ci/cd scenario, you will use some parts of scripts to handle more elegant way !\n\n**general architecture** will be similar to below:\n\n- The _branches_ will be dev, release, demo, prod\n- then, your _firebase architecturee_ will be, \n    - for the main part will cover dev (dev-13df7), release (release-15dx7), demo (demo-3f567), prod (prod-4fg56)\n        - Above have 1 hosting w/ multiple websites + default firestore db + same Authentication + GA enabled\n        - blaze pricing tier for gcp access\n    - in a microservices scenario, you gonna need separate projects dedicated to dbs\n        - i.e. merchandiser-dev, merchandiser-release, merchandiser-demo, merchandiser-prod\n        - merchandiser's app or www is inside dev, release, demo and prod !!\n- So then, your _GCP_ structure will be under 1 billing account w/ 1 organization\n    - dev, release, demo, prod as gcp projects.\n    - if you delete firebase project, gcp part, default behaviour, will be deleted !\n- So then, your _GA_ structure will be under 1 account\n    - dev, release, demo, prod as _properties_ and _all web sites view_ inside.\n    - in GA, correct namings. They will have same ids in firebase.\n\n\n1. Install Firebase CLI w/ `npm install -g firebase-tools`\n2. `firebase login` to **switch firebase user**. or `firebase logout` to change firebase user.\n    - `firebase list` to see _firebase projects_\n    - then, `firebase init` to initialize firebase settings w/ hosting, public=./dist, no route to index.html, no overwrite 404.html, no overwrite index.html\u003cbr\u003e\n3. In a real scenario you will have dev, release, prod, demo stages. And i.e. in dev (as firebase project), you will have 1 hosting which contains 2 apps such as www (static parts) and core-app (dynamic parts).\u003cbr\u003e\u003cbr\u003e\nSo you should consider:\n    - **every links in www** must be redirected correct core-app urls, regarding to stages of core-app !\n    - **deployment of www** must be routed to correct project and correct hosting app ! \n4. **Copy and edit .firebaserc, firebase.json files.** Basicly, below steps are...\n    - Do not add `site: ...` to the firebase.json. Instead, Use `target: ...` !\n    - Add `index.html` firebase js before \u003c/body\u003e\n    - Run `firebase use --add`, for all projects in related firebase account ! This will define alias for `--project ...`. So you can use easily\n    - Run `firebase deploy --project development --only hosting:...`\n    - for local test use `firebase serve`.\n\n## About Fork strategy\n\nOnce you forked, do your customizations and manually get changes from [upstream](https://github.com/tansudasli/html5-material-pwa-boilerplate).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftansudasli%2Fhtml5-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftansudasli%2Fhtml5-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftansudasli%2Fhtml5-boilerplate/lists"}