Skip to content

Commit

Permalink
Release 1.5.0 (#4)
Browse files Browse the repository at this point in the history
* Updated package.json

* Added a new look to the index page

* Updated .htaccess

* Re-indented modernizr config

* Regenerated yarn.lock and package.json

* Moved development webpack config to a separate file

* Removed the need to manually change webpack config on adding a new page

* Removed the need to restart webpack-dev-server every time a new page is added or removed

* Temporary fix to browser opening on different ports on restart

* Fixes restarting and opening of browser on different ports

* Change of plans

* Added support for sass, enabled source mapping, and added default port to dev-server

* Added support for images and fonts, removed cross-env dependency

* General improvements and added support for svg images

* General improvements and added support for proxying backend server

* Updated Readme

* Separated production and development common webpack config to a different file, added production webpack config

* clean previous builds when rebuilding, css minification improvements

* Copy all files that dont get copied in the build process
  • Loading branch information
whimsicaldreamer committed Mar 7, 2020
1 parent 6149b75 commit 013b9a1
Show file tree
Hide file tree
Showing 18 changed files with 1,526 additions and 1,512 deletions.
1 change: 0 additions & 1 deletion .eslintrc.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,5 @@ module.exports = {
"always"
],
"no-console": "off",
"no-unused-vars": "off"
}
};
64 changes: 18 additions & 46 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# HTML5-Template
###### A simple HTML5 boilerplate with the power of Webpack 4
###### A simple HTML5 template with the power of Webpack 4

[![GitHub stars](https://img.shields.io/github/stars/whimsicaldreamer/Html5-template.svg?style=popout-square)](https://github.com/whimsicaldreamer/Html5-template/stargazers)
[![David](https://img.shields.io/david/expressjs/express.svg?style=popout-square)](https://github.com/whimsicaldreamer/Html5-template)
[![David](https://img.shields.io/david/dev/expressjs/express.svg?style=popout-square)](https://github.com/whimsicaldreamer/Html5-template)
[![GitHub license](https://img.shields.io/github/license/whimsicaldreamer/Html5-template.svg?style=popout-square)](https://github.com/whimsicaldreamer/Html5-template/blob/master/LICENSE.md)

_This boilerplate is customized to contain the parts which I generally use to develop my websites. Some parts are taken from popular open source projects._
_This template is built to provide a head start for building the frontend of multipage websites. No-frills, just plain good old HTML5, CSS3, JS and jQuery with a dash of autoreloading. Some parts are taken from popular open source projects._

### Installing

Expand All @@ -21,23 +21,16 @@ _This boilerplate is customized to contain the parts which I generally use to de

### Adding new pages

To add new page (ex: **page2**) in your project, create **html**, **css**, **js** files inside `src` directory and under respective directories.
To add new page (ex: **page2.html**) in your project, create **html**, **css**, **js** files inside `src` directory and under respective directories.
Then,
- add an entry point inside `app.js` file like following:
````js
// page2 refers to the name of the html file
page2: [
"./src/js/page2.js",
"./src/css/page2.css"
"./src/js/<your-js-file>.js",
"./src/css/<your-stylesheet>.css"
]
````
- Modify `webpack.config.js` and add the following just below the **index.html**:
````js
new HtmlWebpackPlugin({
filename: "page2.html",
template: "src/page2.html",
chunks: [ "vendor", "page2"]
})
````
- :tada: **_And you are all done!!_** :tada:

### Using Modernizr
Expand All @@ -61,39 +54,13 @@ To do so:
} else {
console.log("Not Available");
}
```

### Using Font Awesome
```

I have used **fontawesome-svg-core** but anyone could use the **fontawesome-free** package but it might need some changes (I haven't checked).
> One of the most common use cases where you would reach for the core package instead of using fontawesome-free or fontawesome-pro is to create a subset of icons to reduce your final bundled file size.
#### How to use?
- Add the following in your js file. (Ex: We are going to use _shipping-fast_ icon)
```js
import { library, dom } from "@fortawesome/fontawesome-svg-core";
import { faShippingFast } from "@fortawesome/free-solid-svg-icons";
library.add(faShippingFast);
dom.watch();
```
- And then use the imported icon in your HTML file as following:
```html
<i class="fas fa-shipping-fast"></i>
```
**_The rendered icon will be an svg_**. :tada::tada:
### Using backend files
For using backend files like **PHP** (typically its my use case), Browser-sync is in place to pick up changes and reload the browser.
If any other backend files are being used, try changing the `match` option of Browser-Sync plugin in `webpack.config.js` and hopefully
everything should go well.
> **Remember to run you local backend server first and change proxies/ port/ host accordingly.**
> _Its better to remove Browser-sync-plugin and dev-server proxy if you are working with a static site._
### Using a backend during development

To use a backend REST api, edit `proxy-config.json`. For advanced usages, visit [here](https://webpack.js.org/configuration/dev-server/#devserverproxy).

> **Remember to run you backend server first.**

### Running your project

Expand All @@ -107,4 +74,9 @@ It will build the whole project into `dist` directory.
It will build the custom modernizr.js into `src/js/` directory.

## Contributing
Please feel free to create an issue or if you are ready with a fix, I would be more than happy to receive a PR.

You can contribute to this project in the following ways:
- Bug reporting by creating an issue in this repo.
- Fixing bugs by opening a PR.
- Proposing some new additions/ improvements.
- **Star** this project if you found it helpful. :pray: :crossed_fingers:
2 changes: 1 addition & 1 deletion app.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const entryPoints = {
index: [
"./src/js/index.js",
"./src/css/index.css"
]
],
};

module.exports = entryPoints;
34 changes: 34 additions & 0 deletions cleanBuild.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
const fs = require("fs");
const path = require("path");
const pathToDir = path.join(__dirname, "dist");

const cleanDirectory = (path) => {
if (fs.existsSync(path)) {
const files = fs.readdirSync(path);

if(files.length > 0){
files.forEach(filename => {
if(fs.statSync(`${path}/${filename}`).isDirectory()) {
cleanDirectory(`${path}/${filename}`);
}
else {
fs.unlinkSync(`${path}/${filename}`);
}
});
fs.rmdirSync(path);
}
else {
fs.rmdirSync(path)
}

if (path === pathToDir) {
console.log("Successfully removed previous build and preparing new build...");
}
}
else {
console.log("No previous build to remove");
}
};

console.log("Removing previous build...");
cleanDirectory(pathToDir);
56 changes: 28 additions & 28 deletions modernizr-config.json
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
{
"minify": true,
"options": [
"domPrefixes",
"prefixes",
"addTest",
"hasEvent",
"mq",
"prefixedCSSValue",
"testAllProps",
"testProp",
"testStyles",
"setClasses"
],
"feature-detects": [
"test/custom-elements",
"test/history",
"test/pointerevents",
"test/postmessage",
"test/webgl",
"test/websockets",
"test/css/animations",
"test/css/columns",
"test/css/flexbox",
"test/elem/picture",
"test/img/sizes",
"test/img/srcset",
"test/workers/webworkers"
]
"minify": true,
"options": [
"domPrefixes",
"prefixes",
"addTest",
"hasEvent",
"mq",
"prefixedCSSValue",
"testAllProps",
"testProp",
"testStyles",
"setClasses"
],
"feature-detects": [
"test/custom-elements",
"test/history",
"test/pointerevents",
"test/postmessage",
"test/webgl",
"test/websockets",
"test/css/animations",
"test/css/columns",
"test/css/flexbox",
"test/elem/picture",
"test/img/sizes",
"test/img/srcset",
"test/workers/webworkers"
]
}
120 changes: 66 additions & 54 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,56 +1,68 @@
{
"name": "html5-template",
"version": "1.4.0",
"description": "Basic HTML5 starter template with webpack",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "cross-env NODE_ENV=development webpack-dev-server --mode development",
"build": "cross-env NODE_ENV=production webpack --mode production",
"build:modernizr": "modernizr -c modernizr-config.json -d ./src/js/"
},
"author": "Ayan Dey",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/whimsicaldreamer/Html5-template.git"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.6",
"babel-loader": "^8.0.6",
"browser-sync": "^2.26.7",
"browser-sync-webpack-plugin": "^2.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^5.1.1",
"cross-env": "^7.0.0",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"file-loader": "^5.1.0",
"glob-all": "^3.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"@babel/runtime": "^7.8.4",
"@fortawesome/fontawesome-svg-core": "^1.2.27",
"@fortawesome/free-brands-svg-icons": "^5.12.1",
"@fortawesome/free-regular-svg-icons": "^5.12.1",
"@fortawesome/free-solid-svg-icons": "^5.12.1",
"jquery": "^3.4.1",
"modernizr": "^3.9.1",
"normalize.css": "^8.0.1"
}
"name": "html5-template",
"version": "1.5.0",
"description": "A no-frills HTML5 starter template with the power of webpack",
"main": "app.js",
"scripts": {
"dev:open": "wait-on tcp:8080 && open-cli http://localhost:8080",
"dev:run": "nodemon --watch app.js --exec webpack-dev-server --config=webpack.dev.config.js",
"start": "run-p dev:open dev:run",
"prebuild": "node cleanBuild.js",
"build": "webpack --config=webpack.prod.config.js",
"build:modernizr": "modernizr -c modernizr-config.json -d ./src/js/"
},
"dependencies": {
"@babel/runtime": "^7.8.4",
"jquery": "^3.4.1",
"modernizr": "^3.9.1",
"normalize.css": "^8.0.1"
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/plugin-transform-runtime": "^7.8.3",
"@babel/preset-env": "^7.8.6",
"babel-loader": "^8.0.6",
"copy-webpack-plugin": "^5.1.1",
"css-loader": "^3.4.2",
"cssnano": "^4.1.10",
"eslint": "^6.8.0",
"eslint-loader": "^3.0.3",
"file-loader": "^5.1.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"image-webpack-loader": "^6.0.0",
"mini-css-extract-plugin": "^0.9.0",
"nodemon": "^2.0.2",
"npm-run-all": "^4.1.5",
"open-cli": "^5.0.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.7.0",
"sass": "^1.26.2",
"sass-loader": "^8.0.2",
"wait-on": "^4.0.1",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"webpack-merge": "^4.2.2"
},
"author": {
"name": "Ayan Dey",
"url": "https://www.linkedin.com/in/dey-ayan/"
},
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/whimsicaldreamer/Html5-template.git"
},
"keywords": [
"html",
"html5",
"template",
"starter template",
"webpack",
"html5 template",
"boilerplate",
"css",
"javascript"
]
}
7 changes: 5 additions & 2 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
module.exports = {
map: false,
plugins: {
"postcss-preset-env": {},
"cssnano": {},
"cssnano": {
preset: ["default", {
discardComments: { removeAll: true }
}]
},
}
};
11 changes: 11 additions & 0 deletions proxy-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"/": {
"target": {
"host": "your-virtual-host-name",
"protocol": "http",
"port": 80
},
"changeOrigin": true,
"secure": false
}
}
Loading

0 comments on commit 013b9a1

Please sign in to comment.