A webpack based project with an optimized configuration for websites development that aim to be a solid starting point for your projects.
Download the package archive from GitHub directly with this link, extract the archive and optionally change the package.json name and description according to your project and you are done.
In order to start the website development you must run npm run start command. All the website development take place in the src folder, the entry point is src/index.js where you must load all the required files, both styles and scripts.
When runned with the build command it will disable the code source maps and minify all the website files (html, js, scss) place them in the dist folder which is production ready.
- Style with sass
- Code with ES6 and babel
- Browser sync for testing
- Optimize code with minifiers
- Optimize images and svgs
- Optmize the HTML for the build
- Performance report after build
You can write your cool code with sass and ES6, the webpack development server takes care of updating the UI for you. Than you can test how your project is performing on various devices with browser-sync and prepare the release.
It's finally time to run the build and all the code will be concatenated, optimized. All the assets images and stuff will be optimized using img-loader.
When you are building your project for the web, usually you want to test it's performances and if it is compliant with Web Fundamentals and more. Hopefully Google made an awesome tool called lighthouse which scans for you any website and evaluate it against various development rules.
This service is integrated in the repository so after you built your project it will automatically run the perfomances report.
The report will open Google Chrome, so be sure you have it installed otherwise it will fail, the browser window will take some time to perform tests in background than it will automatically close.
When the report process has done you will find the output files containing the results on output folder.
You will find both the JSON result and the HTML result.
You can inspect the JSON result using the official lighthouse viewer provided by Google, simply drag 'n drop the file on the site.
Instead you can open with your browser the HTML report generated from the scan and see what your site is performing and where you have to focus more.
- Create an issue and describe your idea
- Fork the project (https://github.com/codekraft-studio/webstart/fork)
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Publish the branch (
git push origin my-new-feature) - Add some test for your new feature
- Create a new Pull Request
The project is under the ISC License (ISC).
Copyright 2017 Codekraft Studio
Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.