How to deploy backend and frontend projects if they are separate? - node.js

I am developing a web application with a small team, and after researching and studying a bit we discovered it is a good practice to separate back-end and front-end projects. So we will develop the back-end as a REST API with hapijs and mysql database, and the front-end using angularjs.
But in the production environment they must be at the same server, right? How do we deploy them to the same server if they are in separate repositories?
We are a fairly new team, starting our adventures in web development, so we are studying a lot to get things right.
Our technology stack will be:
Hapijs for the webserver
sequelize for orm
socket.io for chat functions
mocha for unit testing
angularjs for frontend
We will use microsoft azure for hosting our web app.
Thank You for the answers and help.

They don't have to be in the same server. It is perfectly fine to have the backend in a different server, it is also handy if you need to scale your backend/frontend but not the other.
There are a few possibilities:
You could use a message broker like RabbitMQ to communicate between the two micro-services
Your frontend app could expose the url of your backend and you use that in your AJAX requests, this requires your backend to enable CORS. Not a fan of this approach.
Use relative urls in your frontend and then pipe the requests with a particular pattern (like /api/*) to your backend. Is your AngularJs app served by a Node.js server or is it a Hapi.js server too?
If Node.js something like
:
app.all(['/api/*', '/fe/*'], function(req, res) {
console.log('[' + req.method + ']: ' + PROXY + req.url);
req.pipe(request({
url: PROXY + req.url,
method: req.method,
body: req.body,
rejectUnauthorized: false,
withCredentials: true
}))
.on('error', function(e) {
res.status(500).send(e);
})
.pipe(res);
});
Where PROXY_URL is the url/ip of your backend server.
Haven't done it in hapi.js but it should also be possible.
I'm sure there are more options, those are the ones I'm familiar with.

As a beginner team you might have come across so many questions. The best thing to do is to
seperate the front end and back end as seperate units. That will lead to better full stack development process. This https://www.freecodecamp.org/news/lessons-learned-from-deploying-my-first-full-stack-web-application-34f94ec0a286/
article explains the process using react as Front end and Express js for backend.
It is well designed for beginners. It includes detailed explanation about your question.

As you guys are starting out now I think you can handle this by creating two server instances with hapi. This addresses your requirement to have only one server in production:
const server = new Hapi.Server();
server.connection({ port: 80, labels: 'front-end' });
server.connection({ port: 8080, labels: 'api' });
This is really easy to implement, however, it comes with a downside: you need to accept down time form both the client and server app whenever you rollout updates.
You can find more info in this post: https://futurestud.io/blog/hapi-how-to-run-separate-frontend-and-backend-servers-within-one-project
In regards to deployment, whatever you use to build a release (continuous integration tools, manual scripts, etc.) can be git pushed to azure: https://azure.microsoft.com/en-us/documentation/articles/web-sites-publish-source-control. For instance, a manual script would fetch your code from the two separate repositories (front-end and back-end), copy the relevant files, update config values and push the end result to git.

Related

Socket.io + REST API + REACT - is it better to separate socket.io from REST API

My question could be flagged as "opinion based" but I am wondering which approach is the best for my application as I am able to do it in both ways.
I am building chat application in which users and conversations are saved in MongoDB. I will have my react application consuming API/APIs. The question is - is it better to have REST API and Socket.io applications running separate? For example:
Have REST API running on port 3005
Have Socket.io running on port 3006
React Application consuming these 2 separately and basically they will not know about each other. My endpoints in REST API endpoints and socket.io will be invoked only in front-end.
On the other hand, I can have my socket.io application and REST API working together in 1 big application. I think it is possible to make it working without problems.
To sum up, at first glance I would take the first approach - more cleaner and easy to maintain. But I would like to hear other opinions or if somebody had a similar project. Usually how the things are made in this kind of projects when you have socket.io and REST API?
I would check the pros and cons for both scenario. For example code and resource reusability is better if you have a single application and you don't have to care about which versions are compatible with each other. On the other hand one error can kill both applications, so from security perspective it is better to have separate applications. I think the decision depends on what pros and cons are important to you.
you can make a separate file for socket.io logic like this:
// socket.mjs file
import { Server } from "socket.io"
let io = new Server()
const socketApi = {
io: io
}
io.on('connection',(socket)=>{
console.log('client connected:', socket.id)
socket.join('modbus-room')
socket.on('app-server', data=>{
console.log('**************')
console.log(data)
io.to('modbus-room').emit('modbus-client', data)
})
socket.on('disconnect',(reason)=>{
console.log(reason)
})
})
export default socketApi
and add it to your project like this:
// index.js or main file
//...
import socketApi from "../socket.mjs";
//...
//
/**
* Create HTTP server.
*/
const server = http.createServer(app);
socketApi.io.attach(server);
//

expressJS exporting other things in addition to app

In my web application (I'm using expressJS), there are many services (such as mongoDB connection, MQTT connection, etc.) that need to be executed once the whole application is executed (using npm start command). Therefore, I can make use of these services in my entire application. For example, I want to use my MQTT connection in different files.
My idea is to export the MQTT connection, MongoDB connection, etc. in addition to the app this way:
//app.js
module.exports = {
app: app,
mqttConnection: myMQTTConnection,
db: myMongoDB
};
However, we know that this approach doesn't work (I tested it and got an error saying: TypeError: app.set is not a function).
How can I export other things in addition to app from app.js file?
If my approach is not possible, what other approaches can I use? (considering the fact that many services (such as connecting to a server, etc.) are asynchronous)

Firebase Hosting with own server node.js

I have webapp with firebase database. I would like hosting the app on firebase. My app has own server nodejs and using websockets. How can I host my app on Firebase? And how can I run my own server on Firebase?
I think your question is quite simple. And the answer is also simple: no, you can't.
Firebase only serves static files. You need to try heroku, codeship, etc for that.
I'm not sure what exactly you are looking for. I'll assume it's one of these two:
you want to run the node.js scripts on Firebase's server
There is no way to run your own code on Firebase's servers.
you want to run the node.js scripts on your own server and have them interact with your Firebase data
Firebase has a node.js package that allows you to talk to its BaaS service from your own node scripts. See the node.js section in Firebase's quickstart and the npm package for Firebase.
You can use Google Cloud Functions to do most task processing in a serverless style: https://firebase.google.com/docs/hosting/functions
I'm using it to dynamically load javascript based on req.url.
With Firebase functions, yes you can. You can watch this tutorial from Google, it's very clear and easy to catch up.
Node.js apps on Firebase Hosting Crash Course - Firecasts
Firebase Hosting allows you to use Cloud Functions to perform server-side processing. This means that you can support dynamic generation of content for your Firebase Hosting site.
Documentation
Firebase Functions is the way to go.
Example:
Setup /index.js in your project with expressjs listening on port what ever you want. F.e. 3000
const app = express()
const port = 3000
...
app.get('/', (req, res, next) => {
... hier your code to handle request
})
...
app.listen(port, () => {
console.log(`app listening at port = ${port}`)
functions.logger.info("Application started", {structuredData: true});
})
Export your function with reference to express-app:
exports.api = functions.https.onRequest(app)

Why should I use Restify?

I had the requirement to build up a REST API in node.js and was looking for a more light-weight framework than express.js which probably avoids the unwanted features and would act like a custom-built framework for building REST APIs. Restify from its intro is recommended for the same case.
Reading Why use restify and not express? seemed like restify is a good choice.
But the surprise came when I tried out both with a load.
I made a sample REST API on Restify and flooded it with 1000 requests per second. Surprise to me the route started not responding after a while. The same app built on express.js handled all.
I am currently applying the load to API via
var FnPush = setInterval(function() {
for(i=0;i<1000;i++)
SendMsg(makeMsg(i));
}, 1000);
function SendMsg(msg) {
var post_data = querystring.stringify(msg);
var post_options = {
host: target.host,
port: target.port,
path: target.path,
agent: false,
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'Content-Length': post_data.length,
"connection": "close"
}
};
var post_req = http.request(post_options, function(res) {});
post_req.write(post_data);
post_req.on('error', function(e) {
});
post_req.end();
}
Does the results I have got seem sensible? And if so is express more efficient than restify in this scenario? Or is there any error in the way I tested them out?
updated in response to comments
behavior of restify
when fed with a load of more than 1000 req.s it stopped processing in just 1 sec receiving till 1015 req.s and then doing nothing. ie. the counter i implemented for counting incoming requests stopped increment after 1015.
when fed with a load of even 100 reqs. per second it received till 1015 and gone non responsive after that.
Corrigendum: this information is now wrong, keep scrolling!
there was an issue with the script causing the Restify test to be conducted on an unintended route. This caused the connection to be kept alive causing improved performance due to reduced overhead.
This is 2015 and I think the situation has changed a lot since. Raygun.io has posted a recent benchmark comparing hapi, express and restify.
It says:
We also identified that Restify keeps connections alive which removes the overhead of creating a connection each time when getting called from the same client. To be fair, we have also tested Restify with the configuration flag of closing the connection. You’ll see a substantial decrease in throughput in that scenario for obvious reasons.
Looks like Restify is a winner here for easier service deployments. Especially if you’re building a service that receives lots of requests from the same clients and want to move quickly. You of course get a lot more bang for buck than naked Node since you have features like DTrace support baked in.
This is 2017 and the latest performance test by Raygun.io comparing hapi, express, restify and Koa.
It shows that Koa is faster than other frameworks, but as this question is about express and restify, Express is faster than restify.
And it is written in the post
This shows that indeed Restify is slower than reported in my initial
test.
According to the Node Knockout description:
restify is a node.js module purpose built to create REST web services in Node. restify makes lots of the hard problems of building such a service, like versioning, error handling and content-negotiation easier. It also provides built in DTrace probes that you get for free to quickly find out where your application’s performance problems lie. Lastly, it provides a robust client API that handles retry/backoff for you on failed connections, along with some other niceties.
Performance issues and bugs can probably be fixed. Maybe that description will be adequate motivation.
I ran into a similar problem benchmarking multiple frameworks on OS X via ab. Some of the stacks died, consistently, after around the 1000th request.
I bumped the limit significantly, and the problem disappeared.
You can you check your maxfiles is at with ulimit, (or launchctl limit < OS X only) and see what the maximum is.
Hope that helps.
In 2021, benchmarking done by Fastify (https://www.fastify.io/benchmarks/) indicates that Restify is now slightly faster than Express.
The code used to run the benchmark can be found here https://github.com/fastify/benchmarks/.
i was confused with express or restify or perfectAPI. even tried developing a module in all of them. the main requirement was to make a RESTapi. but finally ended up with express, tested my self with the request per second made on all the framework, the express gave better result than others. Though in some cases restify outshines express but express seams to win the race. I thumbs up for express. And yes i also came across locomotive js, some MVC framework build on top of express. If anyone looking for complete MVC app using express and jade, go for locomotive.

What is Express.js? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 10 months ago.
The community reviewed whether to reopen this question 10 months ago and left it closed:
Needs more focus Update the question so it focuses on one problem only by editing this post.
Improve this question
I am a learner in Node.js.
What's Express.js?
What's the purpose of it with Node.js?
Why do we actually need Express.js? How is it useful for us to use with Node.js?
What's Redis? Does it come with Express.js?
1) What is Express.js?
Express.js is a Node.js framework. It's the most popular framework as of now (the most starred on NPM).
.
It's built around configuration and granular simplicity of Connect middleware. Some people compare Express.js to Ruby Sinatra vs. the bulky and opinionated Ruby on Rails.
2) What is the purpose of it with Node.js?
That you don't have to repeat same code over and over again. Node.js is a low-level I/O mechanism which has an HTTP module. If you just use an HTTP module, a lot of work like parsing the payload, cookies, storing sessions (in memory or in Redis), selecting the right route pattern based on regular expressions will have to be re-implemented. With Express.js, it is just there for you to use.
3) Why do we actually need Express.js? How it is useful for us to use with Node.js?
The first answer should answer your question. If no, then try to write a small REST API server in plain Node.js (that is, using only core modules) and then in Express.js. The latter will take you 5-10x less time and lines of code.
What is Redis? Does it come with Express.js?
Redis is a fast persistent key-value storage. You can optionally use it for storing sessions with Express.js, but you don't need to. By default, Express.js has memory storage for sessions. Redis also can be use for queueing jobs, for example, email jobs.
Check out my tutorial on REST API server with Express.js.
MVC but not by itself
Express.js is not an model-view-controller framework by itself. You need to bring your own object-relational mapping libraries such as Mongoose for MongoDB, Sequelize (http://sequelizejs.com) for SQL databases, Waterline (https://github.com/balderdashy/waterline) for many databases into the stack.
Alternatives
Other Node.js frameworks to consider (https://www.quora.com/Node-js/Which-Node-js-framework-is-best-for-building-a-RESTful-API):
UPDATE: I put together this resource that aid people in choosing Node.js frameworks: http://nodeframework.com
UPDATE2: We added some GitHub stats to nodeframework.com so now you can compare the level of social proof (GitHub stars) for 30+ frameworks on one page.
Full-stack:
http://sailsjs.org
http://derbyjs.com/
Just REST API:
http://mcavage.github.io/node-restify/
Ruby on Rails like:
http://railwayjs.com/
http://geddyjs.org/
Sinatra like:
http://expressjs.com/
Other:
http://flatironjs.org/
https://github.com/isaacs/npm-www
http://frisbyjs.com/
Middleware:
http://www.senchalabs.org/connect/
Static site generators:
http://docpad.org
https://github.com/jnordberg/wintersmith
http://blacksmith.jit.su/
https://github.com/felixge/node-romulus
https://github.com/caolan/petrify
This is over simplifying it, but Express.js is to Node.js what Ruby on Rails or Sinatra is to Ruby.
Express 3.x is a light-weight web application framework to help organize your web application into an MVC architecture on the server side. You can use a variety of choices for your templating language (like EJS, Jade, and Dust.js).
You can then use a database like MongoDB with Mongoose (for modeling) to provide a backend for your Node.js application. Express.js basically helps you manage everything, from routes, to handling requests and views.
Redis is a key/value store -- commonly used for sessions and caching in Node.js applications. You can do a lot more with it, but that's what I'm using it for. I use MongoDB for more complex relationships, like line-item <-> order <-> user relationships. There are modules (most notably connect-redis) that will work with Express.js. You will need to install the Redis database on your server.
Here is a link to the Express 3.x guide: https://expressjs.com/en/3x/api.html
What is Express.js?
Express.js is a Node.js web application server framework, designed for
building single-page, multi-page, and hybrid web applications. It is
the de facto standard server framework for node.js.
Frameworks built on Express.
Several popular Node.js frameworks are built on Express:
LoopBack: Highly-extensible, open-source Node.js framework for quickly
creating dynamic end-to-end REST APIs.
Sails: MVC framework for
Node.js for building practical, production-ready apps.
Kraken: Secure and scalable layer that extends Express by providing structure and
convention.
MEAN: Opinionated fullstack JavaScript framework that
simplifies and accelerates web application development.
What is the purpose of it with Node.js?
Why do we actually need Express.js? How it is useful for us to use with Node.js?
Express adds dead simple routing and support for Connect middleware, allowing many extensions and useful features.
For example,
Want sessions? It's there
Want POST body / query string parsing? It's
there
Want easy templating through jade, mustache, ejs, etc? It's
there
Want graceful error handling that won't cause the entire server
to crash?
Express.js is a modular web framework for Node.js
It is used for easier creation of web applications and services
Express.js simplifies development and makes it easier to write secure, modular and fast applications. You can do all that in plain old Node.js, but some bugs can (and will) surface, including security concerns (eg. not escaping a string properly)
Redis is an in-memory database system known for its fast
performance. No, but you can use it with Express.js using a redis
client
I couldn't be more concise than this. For all your other needs and information, Google is your friend.
ExpressJS is bare-bones web application framework on top of NodeJS.
It can be used to build WebApps, RESTFUL APIs etc quickly.
Supports multiple template engines like Jade, EJS.
ExpressJS keeps only a minimalist functionality as core features and as such there are no ORMs or DBs supported as default. But with a little effort expressjs apps can be integrated with different databases.
For a getting started guide on creating ExpressJS apps, look into the following link:
ExpressJS Introductory Tutorial
Express is a module framework for Node that you can use for applications that are based on server/s that will "listen" for any input/connection requests from clients. When you use it in Node, it is just saying that you are requesting the use of the built-in Express file from your Node modules.
Express is the "backbone" of a lot of Web Apps that have their back end in NodeJS. From what I know, its primary asset being the providence of a routing system that handles the services of "interaction" between 2 hosts. There are plenty of alternatives for it, such as Sails.
Express.js is a framework used for Node and it is most commonly used as a web application for node js.
Here is a link to a video on how to quickly set up a node app with express https://www.youtube.com/watch?v=QEcuSSnqvck
Express.js created by TJ Holowaychuk and now managed by the community. It is one of the most popular frameworks in the node.js. Express can also be used to develop various products such as web applications or RESTful API.For more information please read on the expressjs.com official site.
ExpressJS is a web application framework that provides you with a simple API to build websites, web apps and back ends. With ExpressJS, you need not worry about low level protocols, processes, etc.
Fast, unopinionated, minimalist web framework for Node.js
Pug (earlier known as Jade) is a terse language for writing HTML templates. It −
Produces HTML
Supports dynamic code
Supports reusability (DRY)
It is one of the most popular template language used with Express.
A perfect example of its power
router.route('/recordScore').post(async(req, res) => {
let gold_nation = req.body.gold && req.body.gold.nationality;
let silver_nation = req.body.silver && req.body.silver.nationality;
let bronze_nation = req.body.bronze && req.body.bronze.nationality;
let competition_id = req.body.competition_id;
console.log(gold_nation)
console.log(silver_nation)
req.body.gold && await country.updateOne({"flag" : gold_nation}, { $inc: { gold: 1 } });
req.body.silver && await country.updateOne({"flag" : silver_nation}, { $inc: { silver: 1 } });
req.body.bronze && await country.updateOne({"flag" : bronze_nation}, { $inc: { bronze: 1 } });
console.log(competition_id)
//await competition.updateOne({"_id" : competition_id}, {$set: {recorded : true}});
//!! Uncomment this and change model/competition.ts set recorer to recorded
// this is commented out so you can test adding medals for every case and not creating competitions every time
res.status(200).json("Success");
});
async record(){
let index = this.competitions.findIndex(e => e._id == this.selectedCompetition);
let goldIndex = this.competitors.findIndex(e => e._id == this.goldWinner);
let silverIndex = this.competitors.findIndex(e => e._id == this.silverWinner);
let bronzeIndex = this.competitors.findIndex(e => e._id == this.bronzeWinner);
console.log(this.competitors[goldIndex]);
console.log(this.competitors[1-goldIndex]);
this.sportService.recordCompetition(this.competitors[goldIndex],
this.competitors[1-goldIndex],
null,
this.competitions[index]).subscribe((m:string) => this.reset(m))
}
reset(message: string){
this.statusMessage = message;
if(message == "Success"){
this.competitions = this.competitions.filter( (c) => c._id != this.selectedCompetition);
this.goldWinner = '';
this.silverWinner = '';
this.bronzeWinner = '';
}
setTimeout(()=>{
this.statusMessage = '';
}, 3000);
}
router.route('/registerCompetitor').post(async(req, res) => {
//! PROVJERI DA LI JE FORMIRANJE TAKMICENJA ZAVRSENO
let competitors = req.body.map( c => ({
name: c.name,
gender: c.gender,
nationality: c.nationality,
sport: c.sport,
disciplines: c.disciplines
}));
console.log(competitors)
await country.updateOne({"flag" : competitors[0].nationality}, { $inc: { numberOfCompetitors: competitors.length } });
await competitor.collection
.insertMany(competitors)
.then( u => {
res.status(200).json("Ok")
})
.catch(err =>{ res.status(400).json("notOk");
});
});

Resources