https://o0pmitev.github.io/githubAPI/
A Webpack 4 boilerplate with built-in:
- HTML file generation to serve your webpack bundles using html-webpack-plugin
- ECMAScript 6 to ECMAScript 5 transpiling with babel
- CSS extraction into a single file using style-loader, css-loader and css-mini-extract-plugin
- SCSS support using sass-loader and node-sass.
- Image and font imports with file-loader
- Github Pages publishing using gh-pages
To learn more about webpack and how to create your own configuration, check out the following tutorial for a quick start: https://auth0.com/blog/zero-config-javascript-app-prototyping-with-webpack
For more advanced webpacking, check out this cool book: https://survivejs.com/webpack/introduction/
-
Clone this repository into a new project folder (replace
[project name]with your project's name)git clone git@github.com:FBW23/dci-boilerplate-II.git [project name] -
Delete the boilerplate's git history
cd <project name> rm -rf .git -
Edit
package.jsonto add you project's namepackage.json{ "name": "[project name]", ... "author": "[your name]" } -
Edit
index.htmlto add your projects name... <head> ... <title>[project name]</title> </head> ...
-
Start a new git repository and make an initial commit
git init git add . && git commit -m "Initial commit" -
Install the dependencies
npm install -
Have fun coding :D
Run Webpack in Development mode and start coding!
npm start
Run Webpack in Production mode.
npm run build
Deploy your code to Github Pages: this script creates a 'gh-pages' branch and serves the production bundle to this branch. For this to work, make sure you already have a remote repo on github.
npm run deploy
Any project created with this boilerplate will follow the structure below:
Project
│ README.md
│ package.json
| package-lock.json
│ webpack.config.js
└───src
│ │ index.html
│ └───scripts
│ | └───index.js
│ └───styles
│ | └───main.scss
| └───images
| └───fonts
└───dist
Should contain a brief description of your project, feel free to delete this guide or rename it to add your own description.
These files contain various information about you, your project and the project dependencies, as well as useful scripts to help you with the development process.
Contains configuration for the webpack package bundler. This file tells webpack how to handle thw various types of files your project might contain. If you must edit this file, do so with caution.
The src folder contains any file you would want to add to your project, before any processing is done to it. This is the main folder you will be working in.
index.html is a template to quickly bootstrap your project so that all js and css files will be automatically added to it. In the webpack workflow, you will not need to add any new html pages to your project, instead your main entry point to the code will be your main javascript file.
The scripts folder will contain any js modules you will add to your project. In order to include these javascript modules in your project, they need to be imported into index.js.
index.js is the entry point of your project. This means that any module imported to this file can be used, and any code in this file will be executed when the browser loads the page. This is the file where you will initially make all the dom manipulations necessary to render your page.
The styles folder will contain any scss or css files (depending on your preference). In order to include additional styles in your project you must import them to main.scss.
main.scss is your style entry point. Any other scss or css imported to this file can be used, and any styles written directly to this file will be applied.
If you prefer to work just with pure css, simply rename this file to main.css. Keep in mind that if you don't use scss each stylesheet you import will make an additional request to the server, which might have an impact on page performance.
To include images in your scripts or styles, place your image files in the images folder, and simply import them into your script:
import cutePuppyJpeg from '../images/cute-puppy.jpg';
const someImage = document.createElement('img');
someImage.src = cutePuppyJpeg;OR to include them in your style:
.cute-puppy {
background-image: url('../images/cute-puppy.jpg');
}NOTE: Don't forget to replace the cute puppy with the actual name of the image you are trying to add.
The fonts folder should include any custom font files you would like to add to your project. To use the font simply import it into your main.scss file.
The dist folder will be automatically generated by webpack whenever your run the build script:
npm run buildThis folder will contain your built project, ready to be deployed online.
Boilerplate created by Leandro Frigerio (@LeandroDCI)
Edited by Itamar Givon (@itamargiv) and Francesca Borg (@FranBTE)