This website skeleton is build based on npm and Webpack. Modules are installed thrugh npm and later on all files are compiled through Webpack. I decided to keep the html files minimal and focused on making it flexible and
Before you install this template, you will need node and npm installed on your machine
In order to install the template, you have to navigate to the root of the project's folder in your terminal and then run:
npm install
At this point, npm should install all modules necessary to run this example. You can add/remove modules in the package.js file.
Thanks to the use of Webpack and npm modules, there are lots of features you might want to incorporate into your web workflow:
- Development folder for building your app- /src
- Production folder for compiling the app- /dist
- Minification plugins to make your html/css/js files minified.
- Code documentation with JSDoc module.- /docs
- Jquery already included.
- Bootstrap included.
- Mustache.js enabled.
- Dist and Docs folders rebuild every time you run prod script
Development enviroment can be run by:
npm run dev
Once app compiles, you will be able to access the code by going to http://localhost:8080 in your browser.This command uses webpack-dev-server and doesn't write any new files to the disk. While webpack-dev-server runs, you can modify your css/js and html files. Localhost website you're working on will be refreshed every time you save your progress.
Deployment is as easy as running npm run dev command in your terminal window.
npm run dev
Once the code compiles, all files will be stored in the distribution /dist folder. Javascript will be bundled into one file and minified. SCSS files will be converted to CSS, combined and minified as well. HTML files will be minified. Separate /img and /font folders will be added. Alongside adding the /dist folder, Webpack will run JSDoc plugin and create /docs folder with updated documentation for javascript. Also, this README file will be added to the front page of the documentation.
The goal of this template was to automate as many tedious "behind the scene" processes as possible. In order to understand development and deployment processes, take a look at project.json and webpack.config.js.
- (Michal Lichwa)[http://michallichwa.com]
This project is licensed under the MIT License - see the LICENSE.md file for details
- I used Academind Webpack Tutorial while creating this template.