Skip to content

lttr/simple-npm-webapp-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple npm webapp starter

Starter skeleton for new simple frontend projects. Focuses on simplicity and not on latest tools and frameworks.

Provides fast and understandable kickoff for new web sites and apps. Contains tools for interactive development with HTML, CSS and JS. Additional tooling and structure can be added later.

In the early 2017 the es5 is still the main supported JavaScript standard among web browsers. There are bazillion tools and options that are not needed for simple applications.

Features

  • live preview
  • dependency manager
  • basic task runner
  • concats multiple css files into one
  • concats multiple javascript files into one

-> Everything on one page of configuration.

Quickstart

Clone or download this repo. Cd into the folder.

npm install

downloads the dependencies and install tools.

npm start

builds the application, begins watching the files for changes and starts the local server and opens browser with the app.

Tasks

  • clean cleans the destination directory and recreates necessary folders
  • build concats and copies styles, javascripts, images and html files
  • serve starts a local server with destination directory as a root directory
  • watch watches for changes and starts appropriate part of the build task
  • start combines build, watch and serve

Run tasks with npm run taskname. npm start and install are default npm tasks, no run is needed.

Tools

  • npm combined with command line tools is your See sources.
  • browser-sync for seamlessly. Command line docs.
  • onchange for detecting changes of files
  • npm-run-all for running tasks in parallel and shx for multiplatform shell commands

Project structure

❯ tree app/ dist/
app/
├── css
│   ├── main.css
│   └── vendor
│       └── bootstrap.min.css
├── img
│   └── npm.png
├── index.html
└── js
    ├── main.js
    └── vendor
        └── bootstrap.min.js
dist/
├── css
│   ├── app.css
│   └── vendor.min.css
├── img
│   └── npm.png
├── index.html
└── js
    ├── app.js
    └── vendor.min.js

Non features

  • no es6, babel, browserify, grunt, gulp, webpack, jspm, commonjs, polymer, flux, foojs or barjs
  • no frameworks
  • no tests

...however you can integrate any of these if you need.

Sources

Articles:

Github repos:

About

Starter skeleton for new simple frontend projects.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published