Our client-side app will be built under OOP (Object-Oriented Programming) paradigm using ES6 classes and Browserify to be able to use some front-end modules from NPM. Also, we are going to automate some tasks to build our application using only npm alias command, like we used in the API project.
To kick off, let’s open the terminal to create a new project. This new project cannot be in the same API directory. This new project will be namedntask-web, so, let’s go:
1 mkdir ntask-web
2 cd ntask-web
3 npm init
With thenpm initcommand, we are gonna answer these questions to describe this new project:
NTask Web generating package.json file
After executing thenpm init, the filepackage.jsonwill be generated. To organize this new project,
we must to create some directories in the project’s root, these folders are: • public: for static files like css, fonts, javascript and images;
• public/css: CSS files only (we are gonna use Ionic CSS);
• public/fonts: for font files (we are gonna use Ionic FontIcons);
• public/js: For JS files, here we’ll put a compiled and minified JS file, generated from thesrc
folder;
• src/components: for components business logic;
• src/templates: for components views;
1 mkdir public/{css,fonts,js}
2 mkdir src/{components,templates}
Below, there is a list with all modules which will be used in this project: • http-server: CLI for start a simple HTTP server for static files only.
• browserify: a JavaScript compiler which allows to use some NPM modules, we’ll use some
modules which have JavaScript Universal codes (codes who works in back-end and front-end layers) and also allows to load using CommonJS pattern, which is the same standard from Node.js.
• babelify: a plugin forbrowserifymodule to enable read and compile ES6 code in the front-
end.
• babel-preset-es2015: the presets for babel recognizes ES6 code viababelify
• tiny-emitter: a small module to create and handle events.
• browser-request: is a version of requestmodule focused for browsers, it is a cross-browser
(compatible with all major browsers) and abstracts the whole complexity of an AJAX’s request.
Basically, we are going to build a web client using these modules. So, let’s install them running these commands:
1 npm install [email protected] [email protected] --save
2 npm install [email protected] [email protected] --save
3 npm install [email protected] [email protected] --save
After the installation, let’s modify package.json, removing the attributes main,script.test and license, and add all the alias commands which will be necessary to automate the build process of
this project.
Basically, we’ll do this tasks:
• Compile and concatenate all ES6 codes fromsrcfolder vianpm run buildcommand;
• Initiate the server in the port3001vianpm run servercommand;
• Create the commandnpm start, which will run:npm run buildand npm run servercom-
mands;
1 {
2 "name": "ntask-web",
3 "version": "1.0.0",
4 "description": "NTask web client application",
5 "scripts": {
6 "start": "npm run build && npm run server",
7 "server": "http-server public -p 3001",
8 "build": "browserify src -t babelify -o public/js/app.js"
9 },
10 "author": "Caio Ribeiro Pereira",
11 "dependencies": { 12 "babelify": "^7.2.0", 13 "browser-request": "^0.3.3", 14 "browserify": "^13.0.0", 15 "http-server": "^0.9.0", 16 "tiny-emitter": "^1.0.2" 17 } 18 }
Now, we need to create again, the.babelrcfile, to setup thebabel-preset-es2015module, to do
this simple task, create the.babelrcin root folder using this code:
1 {
2 "presets": ["es2015"]
3 }
After this setup, let’s include some static files that will be responsible for the layout of our project. To not waist time, we are gonna use a ready CSS stylization, from the Ionic framework, a very cool framework with several mobile components ready to build responsive apps.
We won’t use the full Ionic framework, because it has a strong dependency of Angular framework. We are only gonna use the CSS file and font icon package. To do this, I recommend you to download the files from the link listed below:
• Ionic CSS:code.ionicframework.com/1.0.0/css/ionic.min.css²⁹
• Ionic CSS icons:code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css³⁰ • Ionic Font icons:code.ionicframework.com/1.0.0/fonts/ionicons.eot³¹
• Ionic Font icons:code.ionicframework.com/1.0.0/fonts/ionicons.svg³² ²⁹http://code.ionicframework.com/1.0.0/css/ionic.min.css
³⁰http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css ³¹http://code.ionicframework.com/1.0.0/fonts/ionicons.eot
• Ionic Font icons:code.ionicframework.com/1.0.0/fonts/ionicons.ttf³³ • Ionic Font icons:code.ionicframework.com/1.0.0/fonts/ionicons.woff³⁴
And put their CSS files intopublic/cssfolder and put the fonts files intopublic/fonts.
To start coding, let’s create the homepage and the JavaScript code responsible to load the main page, let’s do it, just to test if everything will run fine. The main HTML is going to be responsible to load the Ionic CSS stylization, the main JavaScript files and also few HTML tags enough to build the layout structure. To understand this implementation, create the filepublic/index.html using the
code below:
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>NTask - Task manager</title>
6 <meta name="viewport" content="width=device-width,initial-scale=1">
7 <link rel="stylesheet" href="css/ionic.min.css">
8 <link rel="stylesheet" href="css/ionicons.min.css">
9 <script src="js/app.js" async defer></script>
10 </head>
11 <body>
12 <header class="bar bar-header bar-calm">
13 <h1 class="title">NTask</h1>
14 </header>
15 <div class="scroll-content ionic-scroll">
16 <div class="content overflow-scroll has-header">
17 <main></main> 18 <footer></footer> 19 </div> 20 </div> 21 </body> 22 </html>
Note: there are two empty tags:<main></main> and <footer></footer>. All the page interaction
will manipulate these tags dynamically using JavaScript codes from thesrc/componentsfiles that
we will write soon.
To finish this section, create thesrc/index.js file, for while, this will display a simpleWelcome!
message in the browser when the page is loaded. This will be modified soon, after all, we are going to create it, just to test if our project will work fine.
³³http://code.ionicframework.com/1.0.0/fonts/ionicons.ttf ³⁴http://code.ionicframework.com/1.0.0/fonts/ionicons.woff
1 window.onload = () => {
2 alert("Welcome!");
3 };
Now we already have a simple, but functional environment to run our NTask client-side app. To execute it, run the commandnpm startand go to:localhost:3001³⁵
If everything works fine, you’ll see this result:
First NTask screen