How to create a server in node js with express.js

what is express.js?

Express.js is an npm(node package manager) package that is used to create an HTTP server listening on port 8080, which response to the client “Hello, User! This is the part of creating an HTTP server using express.js”. Express is a commonly-used web framework that is useful for creating HTTP APIs.

creating a server with express

Make sure you install nodejs from their official website with the stable or recommended version. Node Js are free for a lifetime.

Let, create a new folder, e.g. myApplication. Go into myApplication folder and make a new JavaScript file containing the following code(let’s name it server.js for example). Open the myApplication folder path in Terminal(command line), Then install the express module using the command below.

npm install --save express

or

sudo install --save express
It might ask your system user password to install the express package.

server.js File code

// Import the top-level function of express
const express = require('express');
// Creates an Express application using the top-level function
const app = express();
// Define port number as 8080, make sure no other server using this port, you can change any port number you want.
const port = 8080;
// Routes HTTP GET requests to the specified path "/" with the specified callback function
app.get('/', function(request, response) {
response.send('Hello, User! This is the part of creating http server using express.js');
});
// Make the app listen on port 8080
app.listen(port, function() {
console.log('Server listening on http://localhost:' + port);
});

Copy the above code and paste it in server.js file. From the command line, run the following command:
node server.js
Open your browser and navigate to http://localhost:8080 or http://127.0.0.1:8080 to see the response.

what is react or react.js

React.js

React.js is an open-source library for building user Interfaces. It is not a framework and fully focuses on UI responsible for building rich User Interfaces.

Reach has a rich ecosystem and places really well with other libraries to building full fletch applications.

Why learn to react.js?

  • React was created and maintained by facebook
  • Huge community power
  • Easily debugging and solving problems through react community, StackOverflow and so on.
  • It is also a demanding skillset right now for a job.

Features of react.js

  • Component-based Architecture.
  • React is declarative

Component-Based Architecture

Create a component and use it again and again(reusable).

React is declarative

Tell to React what you want and how it looks and the behavior of react components. React will build the actual UI.
React will handle efficiently updating and rendering of the components.
DOM updates are handles gracefully in React.

More on why react.js?

  • Seamless integrate reacts to any of our applications.
  • A portion of your page or a complete page or even an entire application itself.
  • React community creates the brand new React Native for mobile application.

Prerequisites

  • HTML, CSS and Javascript
  • Javascript ES6 added advantage.
  • Node.js packages

I hope this post will helpful for you to understand the React.js. All the best for your work!

what is React Native hybrid application?

Before we see React Native let us understand what is react.js?

React.js is a JavaScript library for building User Interfaces and typically it’s used for web development. Another library which also used for building Web APPs and that is responsible for rendering DOM on to the screen its called a ReactDOM library. ReactDOM.render(‘…’) to adds the web support. ReactDOM.render() also support for the HTML. React itself is platform-agnostic!. That’s all about React.js.

Let dive into the React Native

React Native is a special library that has a collection of special React components. These components are compiled to the native widgets of ios and Android. React Native has Native platform APIs exposed to javascript. React Native tools do connection or bridge from the javascript code to Native platform code. React Native gives full flexibility to connect javascript to native code and it also gives prebuild native features that are conveniently usable into your javascript code.

In the end, React.js + React Native = Real Native mobile APPs (ios, android)

React + React Native App code will typically look like this:

cons App = props =>{
return(
<View>
<Text>Welcome to helperscript.com</Text>
</View>
)
}

<View> and <Text> which is not a normal HTML element because normal HTML elements are not supported in React Native. Views are compiled to real Native widgets.

some similarities of different platform elements

React for Web => <div>, <input> , …
Native Android => android.view , EditText, …
Native ios => UIView, UITextField , …
React Native =><View>, <Text> , …

Note: React Native maps reusable components to the respective platform equivalents.

The workflow of React Native:

React Native workflow

Difference between Expo CLI/Tool Vs React Native CLI

Expo CLI/Tool

  • Third-party service but absolutely free!
  • No need to signUp, No Pay to build
  • Managed App Development
  • lots of convenience and utility features: simplifies development
  • But you are limited to the Expo Ecosystem.
  • It does not have some fine-tune components normally have so that everyone prefer to React Native CLI.
  • Basic components like camera, map and etc are worked well. Your choice is to depend on the features of the application.
  • If you need more control of native you need to move from Expo CLI to React Native CLI.

React Native CLI

  • Manage by React Native community or Team.
  • Bare-bone development which means If you need to develop an android application, then you need to install Android Studio or If you need to build ios you need to install XCode.
  • XCode works only in Mac Os. If you have windows or Linux you only able to run an Android Studio simulator or emulator. For ios, you can use the Expo CLI App in the apple store.
  • Almost no convenience or utility.
  • Full Flexibility of integrating with any Native code which is not in Expo.

How expo app works?

  • The Expo app has the best feature for developers to see the application in real-time on your own real mobile phones.
  • you can publish an app as an EXPO app. You can also publish as standalone apps.
  • you can also switch to a non-EXPO development flow as well.

Let’s get create the first application:

  • Node.js (Install Node.js for Run install React Native).
  • sudo npm install expo-cli –global
  • Type above into your terminal to install react Native. For window type => npm install expo-cli –global.
  • Then create a project using expo init firs-app
  • npm start

Congratulation you are creating your first react-native application. All the best for your work. Thank you for reading. Have a nice day!

Cordova image picker sample project

Let start step by step pure cordova image picker with crop project using Apache cordova with front end framework OnsenUI with html5 and css3.

Steps

  • Install Node.js ( If you not installed already)
  • Install cordova using cli ( If you not installed already)
  • Create cordova project using cordova
  • Adding onsenui link( You can download here if need locally)
  • Install cordova plugin for accessing camera or gallery and crop.
  • Implementation of code
  • Execute the project in Android emulator or simulator

Install Node.js

  1. Go to Node.Js website for referring different operating system(OS) installation of node.js

Install cordova globally

Go to the Terminal and type

sudo npm install -g cordova

Create cordova project

  1. Go to the folder you want to create a project in terminal
  2. Type cordova create image-picker
  3. Then go to image-picker folder you can see www folder
  4. Open index.html in any editor you want.

Adding OnsenUI to the project

<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<!-- make sure onsenui css file is before the index.css file -->
<!-- make sure onsenui js file is after the cordova.js file -->
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

Your index.html will look like

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
<!-- make sure onsenui css file is before the index.css file -->
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Image picker</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<!-- make sure onsenui js file is after the cordova.js file -->
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Install cordova plugin

We need to install two plugins for image pick and image crop.I recommend to use plugin cordova-plugin-camera and

Got to the Project folder image-picker in terminal and type

cordova plugin add cordova-plugin-camera

After Installed cordova-plugin-camer install cropper plugin

cordova plugin add cordova-plugin-crop

Implementation of code

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
<link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

<!-- make sure onsenui css file is before the index.css file -->

<title>Image picker</title>
</head>
<body>

<ons-splitter>
<ons-splitter-side id="menu" side="left" width="75%" collapse swipeable>
<ons-page>
<ons-list>
<ons-list-item>
<div class="image-section" onclick="uploadImage()">
<span class="img-relative">
<img src="img/logo.png" id="profile-picture"/>
<span class="icon-edit"><i class="material-icons">&#xe254;</i></span>
</span>
</div>

</ons-list-item>
<ons-list-item onclick="fn.load('home.html')" tappable>
Home
</ons-list-item>
<ons-list-item onclick="fn.load('settings.html')" tappable>
Settings
</ons-list-item>
<ons-list-item onclick="fn.load('about.html')" tappable>
About
</ons-list-item>
</ons-list>
</ons-page>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html"></ons-splitter-content>
</ons-splitter>

<template id="home.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Main
</div>
</ons-toolbar>
<p style="text-align: center; opacity: 0.6; padding-top: 20px;">
Swipe right to open the menu!
</p>
</ons-page>
</template>

<template id="settings.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
Settings
</div>
</ons-toolbar>
</ons-page>
</template>

<template id="about.html">
<ons-page>
<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="fn.open()">
<ons-icon icon="md-menu"></ons-icon>
</ons-toolbar-button>
</div>
<div class="center">
About
</div>
</ons-toolbar>
</ons-page>

</template>
<script type="text/javascript" src="cordova.js"></script>
<!-- make sure onsenui js file is after the cordova.js file -->
<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

index.js

var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {



    }
};

app.initialize();

window.fn = {};

window.fn.open = function() {
    var menu = document.getElementById('menu');
    menu.open();
};

window.fn.load = function(page) {
    var content = document.getElementById('content');
    var menu = document.getElementById('menu');
    content.load(page)
        .then(menu.close.bind(menu));
};


function uploadImage(){
    navigator.camera.getPicture(onSuccess, onFail, {
        quality: 50,
        destinationType: Camera.DestinationType.FILE_URI,
       sourceType:Camera.PictureSourceType.PHOTOLIBRARY
//sourceType:Camera.PictureSourceType.CAMERA 
//change sourceType if you want to take a picture for profile picture
    });
}

function onSuccess(imageData) {
    console.log(imageData);
    var bloby;
    /*Crop Image Plugin Code*/
    plugins.crop(function success (data) {
 // data give the croped image then we set to the image tag
            var imgFile = document.getElementById('profile-picture');
            imgFile.src = data;


        },
        function fail () {

        }, imageData, {quality:100});
}

function onFail(message) {
    console.log('Failed because: ' + message);
}

Note: Un command the //sourceType:Camera.PictureSourceType.CAMERA in index.js file, if you want the source type from camera and delete the line sourceType:Camera.PictureSourceType.PHOTOLIBRARY

index.css

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    background-color:#E4E4E4;
    background-image:linear-gradient(top, #A7A7A7 0%, #E4E4E4 51%);
    font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
    font-size:12px;
    height:100vh;
    margin:0px;
    padding:0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-right, 0px);
    text-transform:uppercase;
    width:100%;
}

/* splitter layout (default) */
#profile-picture{
    width: 100px;
    height: 100px;
    border-radius:50px;
    border:1px solid #ccc;
}
.image-section{
    text-align: center;
    position: relative;

}
.icon-edit{
    position:absolute;
    right:0;
    bottom:0;
    color:white;
    background:mediumseagreen;
    border-radius:50%;
    width:30px;
    height:30px;

}
.material-icons{
    color:#fff;
    font-size: 20px !important;
    position: relative;
    top:3px;
}

Execute the cordova project by using cli

To run the project you need to add the project type in cordova. Open image-picker folder in terminal and type

 cordova platform add android
 cordova platform add ios 
  • For adding ios platform you need xcode install on your system.
  • For adding Android platform you need Android Studio with emulator to run and see the project is working fine

Note: If you need android only don’t need to add cordova platform add ios. If you need only ios don’t need to add cordova platform add android

After adding platform run below command in terminal

cordova run android

I hope this will help you! Thank you for reading. Best of Luck!