freitag-auto-base

freitag-auto-base is a NPM package that build and configure the skeleton for a NodeJS app. It brings Stylus, Gulp and Browser-Sync to the project, so you wont need to configure those packages yourself.

Instalation

1. First, create the directory for your application

mkdir myApp 

1. Inside the myApp directory, type npm init as usual for any other NodeJS app.

npm init

This will generate the package.json that we all know:

{
  "name": "package-name",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "your-name",
  "license": "ISC"
}

Keep this in mind, we will modify this file later.

1. Install the freitag-auto-base package

npm i freitag-auto-base --save

It might take a few minutes to completely install the package, so don't worry.

1. After instalation, modify the package.json file to insert the baseGenerate script. Your package.json should look as follows:

{
  "name": "package-name",
  "version": "1.0.0",
  "description": "description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "baseGenerate": "generateBase"
  },
  "author": "your-name",
  "license": "ISC"
}

1. Finally, type in the command-line npm run baseGenerate

Your skeleton is done! You have a structure inside the myApp directory that look as follows:

.
+-- public
|   +--css
|   |   +--style.css
|   +--js
|   |   +--script.js //Where you type your js scripts
|   +--img
|   +--stylus
|   └── +--style.styl //where you type your stylus code
|
+-- package.json
+-- gulpfile.js
└── index.html //Your main html file

1. To finally launch your app, type gulp and the browser will launch a live preview of your app.