Node.js is a powerful JavaScript runtime built on Chrome’s V8 JavaScript engine. It allows you to build fast and scalable server-side applications using JavaScript. HapiJS is a rich framework for building applications and services in Node.js. AngularJS is a popular front-end framework for building dynamic web applications. In this tutorial, I will show you how to build a Node.js application using HapiJS and AngularJS.
Setting up the project
First, you need to set up your Node.js project. Create a new directory for your project and run the following command to initialize a new Node.js project:
npm initFollow the prompts to set up your project’s metadata. Next, install the necessary dependencies:
npm install hapi angular --saveThis will install HapiJS and AngularJS in your project.
Creating the server with HapiJS
Next, create a new file called server.js in your project directory. This file will contain the code for your HapiJS server. Here’s an example of a simple HapiJS server:
const Hapi = require('hapi');
const server = new Hapi.Server();
server.connection({
port: 3000,
host: 'localhost'
});
server.route({
method: 'GET',
path: '/',
handler: (request, reply) => {
reply('Hello, world!');
}
});
server.start((err) => {
if (err) {
throw err;
}
console.log(`Server running at: ${server.info.uri}`);
});This code creates a new HapiJS server that listens on port 3000 and responds with "Hello, world!" when you visit the root URL in your browser.
Creating the AngularJS front-end
Next, create a new directory called public in your project directory. This directory will contain the front-end code for your AngularJS application. Inside the public directory, create a new HTML file called index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>My App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyCtrl">
{{ message }}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
$scope.message = 'Hello, AngularJS!';
});
</script>
</body>
</html>This code sets up a basic AngularJS application that displays the message "Hello, AngularJS!" on the page.
Connecting the front-end to the back-end
To connect your AngularJS front-end to your HapiJS back-end, you need to serve the public directory with HapiJS. Modify your server.js file to serve the public directory:
server.register(require('inert'), (err) => {
if (err) {
throw err;
}
server.route({
method: 'GET',
path: '/{param*}',
handler: {
directory: {
path: 'public'
}
}
});
});This code registers the inert plugin, which allows you to serve static files with HapiJS. It then creates a route that serves the files in the public directory.
Running the application
To run your Node.js application, run the following command in your project directory:
node server.jsVisit http://localhost:3000 in your browser to see your AngularJS application running with the HapiJS server.
Conclusion
In this tutorial, you learned how to build a Node.js application using HapiJS and AngularJS. HapiJS is a powerful framework for building server-side applications in Node.js, while AngularJS is a popular front-end framework for building dynamic web applications. By combining these two technologies, you can create fast and scalable web applications. I hope this tutorial helps you get started with Node.js, HapiJS, and AngularJS.
