FRONTEND BOILERPLATE
This boilerplate uses Webpack boundler and its dev server helps you build web apps and sites much faster. this project also uses Bootstrap , and a modern development workflow.
Features
- Live reloading Time-saving synchronised browser update after changes by using BrowserSync.
- Automatically optimization entry files
concatenate, minify and inject output files to HTML - Sass for stylesheets
with the 7-1 Pattern - Webpack 5 a good configuration - module bundler
- Bootstrap 5 - the most popular HTML, CSS and JS framework
- jQuery 3.6.0 - JavaScript library
- Font Awesome 4.7 - the web's most popular vector icons and social logos
Theme development
Node.js and npm is required dependency to work with this starter.
You can optionally use Yarn package manager as well.
Installation
- Install Node.js (installation depends on operation system). (npm is distributed with Node.js).
- It is recommended to install the latest version of yarn. How to install yarn?
- Clone the repo using
git clone https://github.com/smarteist/Frontent-Starter-Boilerplate.git
. - Open project folder and run
npm install
command or if you installed yarnyarn
.
Its Done.
Build commands
yarn start
ornpm run start
─ webpack can watch files and recompile whenever they change, and start BrowserSync server session.yarn build
ornpm run build
─ compile assets without any compression or optimization.yarn build:production
ornpm run build:production
─ compile and optimize (the files in your assets directory) for production.yarn clean
ornpm run clean
─ cleanup previous build files in /dist folder.yarn lint:js
ornpm run lint:js
─ this command will lint all js files based on.eslintrc.js
.yarn lint:style
ornpm run lint:style
─ This command will lint all style files based on.stylelintrc.js
Structure
Shorten directories and files structure which you'll see after build:
▼ project/
│
├──▼ src/
│ ├──▼ assets/ # template asset files
│ │ ├──► fonts/ # place template fonts files here
│ │ ├──► images/ # template images files
│ │ └──▼ styles/ # template style files
│ │ ├── [...] # 7-1 Sass architecture folders
│ │ └── main.scss # main Sass file that references scss source files
│ ├──▼ html/ # template HTML files
│ │ ├──▼ partials/ # partials of HTML code
│ │ │ └── [...]
│ │ ├── 404.html # example 404 error page
│ │ └── index.html # default index page
│ │ └── [...]
│ ├──▼ scripts/ # template javascript files
│ │ ├──► modules/ # dedicated project modules
│ │ ├──▼ vendor/ # necessary parts of frameworks and libs
│ │ │ └── [...] # Bootstrap, jQuery, etc...
│ │ └── main.js # main javascript file that references JS source files
│ ├── index.js # entry point of template
│ └── [...]
├──▼ dist/ # distribution folder with production build (don't edit*)
│ ├──► css/ # output styles
│ ├──► images/ # output images
│ ├──► js/ # output javascripts
│ ├── index.html # homepage
│ └── [...] # miscellaneous
├──▼ node_modules/ # Node.js packages (don't edit*)
│ └── [...]
├── .babelrc # Babel configuration file
├── .eslintrc.js # ESLint configuration file
├── .stylelintrc.js # StyleLint configuration file
├── package.json # Node.js dependencies and scripts
├── webpack.config.js # Webpack configuration file
├── package-lock.json # Node.js dependencies lock file (don't edit)
└── [...] # other files
License
Code released under the MIT license.