How to deploy backend and frontend projects if they are separate?

Question

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.

Answer 1

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.

Answer 2

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.