NodeJS – Setup a Simple HTTP Server / Local Web Server

This is a quick post to show you how to setup a simple HTTP web server on your local machine using NodeJS. The web server runs on the http-server npm package, a simple zero-configuration http server for serving static files to the browser, it’s started from the command line and doesn’t require a server.js file.

Download and Install NodeJS

If you haven’t installed Node yet, download the latest stable release of NodeJS from https://nodejs.org and install using all the default options.

Install the http-server package from npm

Install the http-server globally on your machine using the node package manager (npm) command line tool, this will allow you to run a web server from anywhere on your computer.

Open a command prompt / command line window and enter the following:

"npm install -g http-server"

Browse to your local website with a browser

Open your browser and go to the address http://localhost:8080 and you should see your local website.

Custom icon fonts in Ionic 2

This tutorial will show you how to use custom icons within your Ionic 2 app.

Step 1

Gather your SVG icons and head over to https://icomoon.io. Here create a new icon pack and upload your custom svgs.

Once done download and extract the iconmoon.zip file and put the fonts inside src/assets/fonts/iconmoon/

Now create a new scss file inside src/theme/iconmoon.scss, make sure your paths to the fonts match up.

Include the following:


@font-face {
font-family: 'icomoon';
src: url('../assets/fonts/iconmoon/icomoon.eot?3e91zf');
src: url('../assets/fonts/iconmoon/icomoon.eot?3e91zf#iefix') format('embedded-opentype'),
url('../assets/fonts/iconmoon/icomoon.ttf?3e91zf') format('truetype'),
url('../assets/fonts/iconmoon/icomoon.woff?3e91zf') format('woff'),
url('../assets/fonts/iconmoon/icomoon.svg?3e91zf#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}

@mixin makeIcon($arg, $val) {
.ion-ios-#{$arg}:before ,
.ion-ios-#{$arg}-circle:before ,
.ion-ios-#{$arg}-circle-outline:before ,
.ion-ios-#{$arg}-outline:before ,
.ion-md-#{$arg}:before ,
.ion-md-#{$arg}-circle:before ,
.ion-md-#{$arg}-circle-outline:before ,
.ion-md-#{$arg}-outline:before {
font-family: "icomoon" !important;
content: $val;
}
}

@include makeIcon(icon-new-calendar, '\e904');

Step 2

Make sure to import the iconmoon.scss file in to variables.scss inside the theme directory.

Step 3

Now inside our .html files we can then apply the fonts by applying the class appropriately, eg:


<ion-tabs [selectedIndex]="selectedIndex" class="c-tabsnav">
<ion-tab [root]="tab4Root" tabTitle="Profile" tabIcon="icon-new-calendar,"></ion-tab>
</ion-tabs>

Below are some custom icons that have been included in to an app I’ve been working on recently.

References:
Stack Overflow