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

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 toseperate 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.