Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jomendez/simple-webpack-boilerplate
A simple skeleton project to rapid prototyping and development of front-end apps, with scss (optional), pug(optional), ES7, webpack (bundlefy, uglyfy,etc).
https://github.com/jomendez/simple-webpack-boilerplate
Last synced: 6 days ago
JSON representation
A simple skeleton project to rapid prototyping and development of front-end apps, with scss (optional), pug(optional), ES7, webpack (bundlefy, uglyfy,etc).
- Host: GitHub
- URL: https://github.com/jomendez/simple-webpack-boilerplate
- Owner: jomendez
- License: mit
- Created: 2020-04-09T04:16:47.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-07-10T20:58:19.000Z (over 1 year ago)
- Last Synced: 2024-03-18T05:10:57.482Z (8 months ago)
- Language: JavaScript
- Homepage: http://www.jomendez.com/webpack-boilerplate/
- Size: 1.76 MB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://opensource.org/licenses/MIT) [](https://travis-ci.org/jomendez/simple-webpack-boilerplate) [](https://david-dm.org/jomendez/simple-webpack-boilerplate)
# Create web apps with Webpack
A simple but powerful project to rapid prototyping and development of front-end apps, with scss (optional), pug (optional), ES7, webpack (bundlefy, uglyfy, etc). Very useful to create static websites or apps, without having to worry about setting up the environment.
### You can get the source code free on [Github](https://github.com/jomendez/simple-webpack-boilerplate)
## Features
* **Modern Technologies:** Full support for HTML5, PUG, JavaScript (Vanilla and ES7) and CSS (Sass, scss and PostCSS)
* **Built-in Server:** Local development server with live reloading
* **Performance Tuning:** CSS and JavaScript transpilation, bundling, autoprefixing, and minification
* **Image Optimization:** Optimizes images for loading speed
* **Favicon Generation:** Automatically generates all favicons for Web, Apple and Android devices from one image file
* **Code Linting:** Full support for JavaScript (ESLint) and CSS (StyleLint) linting
* **Setup Wizard:** Optionally install helpful libraries and snippets including:
* jQuery
* Google Analytics
* FTP deployment process
* **Cutting Edge:** Uses Webpack for processing and bundling your code
* **Deployment:** Built-in support for deployment via FTP
## Requirements
* [Node.js](http://nodejs.org/) (developed with node 12)
## Installation Steps
### Clone repo:
```
git clone https://github.com/jomendez/simple-webpack-boilerplate && cd simple-webpack-boilerplate &&
rm -rf .git && git init
````
1. Run `npm install`
2. Run `npm run setup` to configure the app (include JQuery, etc)
In this step you'll be able to setup your google analytics, enable jquery, setup (optional) an FTP for deployments.
3. Run `npm run dev` to open a browser and lunch a local web server with live-reload
4. Run `npm run build` build for production (./dist folder)
5. Run `npm run deploy` to deploy your code to your FTP.
## If everything went well (`npm run dev`)...
You browser should open a new tab and you should see something like this:
## Quick example
It is recommended to create a new page within the src folder or use the one that comes with the example *page.pug* to start adding your content.
Then you can go to src/js/app.js file and add the following lines:
```
const page = require("../page.pug");
document.querySelector('container').innerHTML = page();
```
The code above is going to transpile the pug file this particular case (but it can be an html file).
Then we will insert the content of the page into the container tag on the index.html.