22

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.

Victor Silva Do Nascimento
  • 281
  • 1
  • 2
  • 5

3 Answers3

11

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.

nbermudezs
  • 2,814
  • 1
  • 20
  • 20
  • 1
    Hello @nbermudezs, thanks for your fast reply. The problem of keeping them at separate servers is the cost, we will have to pay for two servers, which is not viable for us. – Victor Silva Do Nascimento Feb 17 '16 at 02:36
  • 1
    If you want to keep them as separated instances but only use one server you could use something like [docker](https://www.docker.com/), of course it involves even more learning to your adventure. – nbermudezs Feb 17 '16 at 03:08
  • If docker is not for you, you will have to play around with bash scripts to cd into the frontend project, run whatever commands you need to run to generate dist files (minified/uglified files ready for production), then copy them to the main project, probably into a public folder and finally start your deploy process. – nbermudezs Feb 17 '16 at 03:11
  • I have never used Azure, so I don't know how their deploy process is. With alternatives like heroku/dokku it is a simple `git push` – nbermudezs Feb 17 '16 at 03:12
  • Any advantages of using rabbitmq instead of REST API here? or maybe web socket? – basilisk Jul 21 '20 at 21:30
  • 1
    @nbermudezs "of course it involves even more learning to your adventure" lmao – ino Oct 10 '22 at 13:58
4

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.

Amila Weerasinghe
  • 791
  • 7
  • 10
0

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.

Andre Gallo
  • 2,261
  • 5
  • 23
  • 46