GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → shivero → webpack-4-react-bootstrap-starter-template

shivero / webpack-4-react-bootstrap-starter-template

Licence: MIT license
Starter boilerplate template for webpack 4 with React, Bootstrap 4

Programming Languages

javascript
184084 projects - #8 most used programming language
SCSS
7915 projects
HTML
75241 projects

Labels

reacteslintbootstrap4jshinthtml-webpack-pluginbabel-es6extract-text-webpack-pluginsass-loaderwebpack4webpack4starter

Projects that are alternatives of or similar to webpack-4-react-bootstrap-starter-template

webpack-boilerplate
Webpack 4 boilerplate with Babel, Bootstrap 4, jQuery and SCSS on board
Stars: ✭ 24 (+50%)
Mutual labels:  bootstrap4, webpack4, webpack4starter
React Starter Kit
React, Redux, Webpack, Material UI, Boostrap 4, Code Splitting, HMR
Stars: ✭ 229 (+1331.25%)
Mutual labels:  eslint, bootstrap4, webpack4
Webpack React Boilerplate
Minimal React 16 and Webpack 4 boilerplate with babel 7, using the new webpack-dev-server, react-hot-loader, CSS-Modules
Stars: ✭ 358 (+2137.5%)
Mutual labels:  eslint, webpack4
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (+118.75%)
Mutual labels:  eslint, webpack4
boilerplate-react-redux-pwa
It's sample boilerplate with pwa + react + redux + redux-saga
Stars: ✭ 14 (-12.5%)
Mutual labels:  babel-es6, webpack4
React Redux Bootstrap Webpack Starter
React 16.9 + Typescript + React-Router 4 + Redux + Bootstrap 4 + Hot Reload + redux-devtools-extension + Webpack 4 + styled-components STARTER
Stars: ✭ 133 (+731.25%)
Mutual labels:  bootstrap4, webpack4
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: ✭ 41 (+156.25%)
Mutual labels:  eslint, webpack4
Vue Webpack Config
Koa2、Webpack、Vue、React、Node
Stars: ✭ 151 (+843.75%)
Mutual labels:  eslint, webpack4
webpack-gulp-wordpress-starter-theme
A WordPress theme with Webpack & Gulp
Stars: ✭ 110 (+587.5%)
Mutual labels:  eslint, bootstrap4
PERN-Advanced-Starter
Advanced PERN stack starter kit (PostgresSQL, Express, React, & Node), complete with ESLint, Webpack 4, Redux, React-Router, and Material-UI kit.
Stars: ✭ 51 (+218.75%)
Mutual labels:  babel-es6, webpack4
mern-boilerplate
React + Express + Webpack + Mongo = MERN Stack Boilerplate
Stars: ✭ 39 (+143.75%)
Mutual labels:  eslint, sass-loader
React Bootstrap Webpack Starter
ReactJS 16.4 + new React Context API +react Router 4 + webpack 4 + babel 7+ hot Reload + Bootstrap 4 + styled-components
Stars: ✭ 103 (+543.75%)
Mutual labels:  bootstrap4, webpack4
simple react startkit
This is a simple react boilerplate, without complex dependencies(eg. redux or router), this project can help you start the react project in seconds.
Stars: ✭ 109 (+581.25%)
Mutual labels:  eslint, webpack4
bootpack
Create multi-page websites using bootstrap for development and webpack for task running.
Stars: ✭ 30 (+87.5%)
Mutual labels:  bootstrap4, webpack4
vue-antdesign-admin-template
Ant Design Pro Vue Template
Stars: ✭ 127 (+693.75%)
Mutual labels:  eslint, webpack4
mobxSpa
企业级SPA项目，完整开发脚手架
Stars: ✭ 96 (+500%)
Mutual labels:  eslint, webpack4
Splain
small parser to create more interesting language/sentences
Stars: ✭ 15 (-6.25%)
Mutual labels:  webpack4
311
New web portal for BOS:311
Stars: ✭ 15 (-6.25%)
Mutual labels:  eslint
eslint-config-website
GUI for generating ESLint configs
Stars: ✭ 45 (+181.25%)
Mutual labels:  eslint
eslint-plugin-total-functions
An ESLint plugin to enforce the use of total functions (and prevent the use of partial functions) in TypeScript.
Stars: ✭ 72 (+350%)
Mutual labels:  eslint
View All Similar Projects ➔

Webpack 4 starter boilerplate template with React, Bootstrap 4

Starter template for projects that use webpack 4 in pair with React, Bootstrap 4 and ES6 Javascript. This project contains configuration for development and production deploy using webpack 4 module bundler and tools which might be helpful

Getting started

Make sure you install all dependencies first, run npm -i (shorthand for npm install)

npm i

To use configured development mode simply run

npm run start

To build all files for the production run

npm run build

An output is minified via --mode flag which is set to production (already minified, optimized bundle) - additionally /dist directory is removed each time you run this script to make sure there are no artifacts left in the output location

Optionally there is configured a task to export files with development mode (output is not minimized/optimized). To use it run

npm run dev

What's already configured?

  • React - create app components using Facebook's React Javascript UI library
  • Bootstrap 4 - popular framework for building responsive, mobile-first sites
  • Babel - transpile javascript ES6 code down to ES5
  • Extract Text Plugin - extract styles to separate files
  • SASS Loader - utilize modern SASS preprocessor to create styles for your app and compile them to .css
  • Html Webpack Plugin - allows use of predefined HTML template (entry file: ./src/index.html)
  • File Loader - allows use of media files in project via emitted URL
  • Image Webpack Loader - compress source images in build with imagemin
  • Webpack Dev Server - serves an app and opens a browser for development. Updates the browser on file changes.

Project structure

  • /src - here are all development files
  • /dist - production output, imported libraries are bundled into separated vendor.[hash].js, while rest of components are in app.[hash].js (same for styles)

Tools used to make life a little better

  • eslint - Javascript linter - configuration in eslintrc.json file
  • jshint - Javascript linter - configuration in .jshintrc file

License

This project is licensed under MIT license.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].