How to get an Angular 4 NodeJS site up and running in minutes

In this demo I’ll be showing you how to use the Angular 4 CLI (command line interface) to get an Angular 4 website up and running on Node quickly. This will be the prerequisite for the next Jitsi series of tutorials where I will embed a Jitsi client into and Angular 4 app.

First let’s install the Angular CLI globally so that we can use it in future projects without having to install it again locally.

Open a command prompt (as Administrator) and run the NPM installer

npm install -g @angular/cli
Run Cmd and Administrator
Run Cmd and Administrator
NPM install Angular CLI
NPM install Angular CLI

When the NPM Install has completed open a file explorer window and let’s create a directory for our new files

Basic Angular Folder Structure
Basic Angular Folder Structure



Here I am using the path C:\demos\basic-angular-4

Back in your command window go to the directory you just created

cd C:\demos\basic-angular-4
Angular go to NPM home directory
Angular go to NPM home directory

Now get the Angular CLI tool to create our new project and run it on a Node JS http server

In the command window type

ng new basicAngular4
Angular CLI New Project
Angular CLI New Project

After pressing enter the command will run. It will take a few minutes to set things up, but it will be worth the wait by setting everything you need up to get running quickly.

When the new project creation has finished go to the newly created project directory

cd basicAngular4
Go To New Angular Project Folder
Go To New Angular Project Folder

and get NPM to compile our TypeScript and start a Node JS Web Server instance to serve our angular files.

NPM Start
Angular NG Start New NodeJS Server
Angular NPM Start New NodeJS Server Instance

You will notice that in the screen output it tell you that Node will be serving your files locally on a specific port – on mine it’s 4200

Open Angular Project on Node Port 4200
Open Angular Project on Node Port 4200

Open your web browser and type in the address specified in the NPM start output


http://localhost:4200/
Run Angular App In Browser
Run Angular App In Browser

That’s it!!

In the next demo, I’ll be using existing JavaScript libraries with our Angular Project.



Getting Jitsi Meet up and running on NodeJS

If you don’t know about Jitsi, it’s an open source video conferencing suite of tools, both client and server side that facilitates real-time communitication.

In this post I’m going to show how to get the very basics of using the client side Jitsi library working so that we can embed it in our own application. Note that we don’t need any server implementation for this, as Jitsi.org provides a service we can connect to and use as a meeting hub

In this example I am going to be using Node JS to serve up my basic web application. I am then going to insert a JavaScript reference to the Jitsi Meet library hosted in the Jitsi CDN.

When the Jisti JavaScript is loaded I am then going to execute some command to get the bare essentials for an online meeting between two parties A and B.

Node JS
Node JS

 

If you don’t already have a basic Node site up and running to server document then follow my blog at

Create a basic Node JS Web Site in minutes

When you have the basic structure set up open the index.html file in the public_html directory

Edit Index html
Edit Index html

I’m using Sublime Text to edit the file, but you can use whatever editor you choose.

Next add the JavaScript references to Jquery and Jitsi

Add-Jquery-And-Jisti
Add JQuery and Jisti




<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://meet.jit.si/external_api.js"></script>

And add the code to execute the Jitsi client using the JQuery OnLoad event

Set JQuery Onload to run Jisti Client
Set JQuery Onload to run Jisti Client

<script>
$(document).ready(function(){
       var domain = "meet.jit.si";
  var options = {
    roomName: "JitsiMeetAPIExample",
    width: 700,
    height: 700,
    parentNode: document.querySelector('#meet')
  }
var api = new JitsiMeetExternalAPI(domain, options);
});
</script>

We just need to add a placeholder into the markup to display our video component

meeting

 

Jisti meet basic javascipt and html
Jisti meet basic javascipt and html

 

You can find the code for this article at

https://github.com/malcolmswainecom/jitsi-meet-basic-web-client/wiki/Getting-Jitsi-Meet-up-and-running-on-Node-JS