Different project structures when building an Angular App with separated Spring Backend

Question

I want to build a web page where I separate Database, Backend and Frontend and make then communicate via REST. I got quite confused about how to structure the project(s). As I read, there are the following approaches:

Make different projects: one for the frontend (let's say Angular) and one for the Backend (Spring) including the database connection. These are completely separated from each other and different IDE's might be used.
Build it in one big project but still use REST for communication (see picture below).

Now what I would like to know is what the difference between these two approaches is? I do not know (and do not ask) which one is the better one, but I cannot even make out reasons or effects to pick one above or below the other one.

I think the best solution is to follow the architecture of JHipster which puts both backend and frontend into one project. If you put them into two different projects, you have to take care of CORS, and also use a suited authentication mechanism like JWT or Oauth — zakaria amine
– zakaria amine, Commented Nov 11, 2018 at 12:33
@zakariaamine But wouldn't I always need to use suited authentication mechanisms when I seperate Frontend and Backend by REST, since I need a ways to authenticate the user access? Or did I get that wrong? — Rüdiger
– Rüdiger, Commented Nov 11, 2018 at 14:00
If you put them in the same project, and you serve directly your front end files by a spring Controller, then you can simply use a HTTP session, which is already provided. Otherwise, different projects requires further setup in both the front end, in which you have to handle the security and the backend to issue and verify tokens. — zakaria amine
– zakaria amine, Commented Nov 11, 2018 at 18:44
@zakariaamine I see that I got troubles understanding how all of that works together. But let's see if we can clarify this a little: Whenever I can simply use a HTTP session that is already provided, I do not have a "real" REST separation between frontend and backend, right? Since I could also just leave the REST-stuff. — Rüdiger
– Rüdiger, Commented Nov 11, 2018 at 20:20

abrandell · Accepted Answer · 2018-11-11 15:56:10Z

1

This is really question about personal preference, but you have them be in completely different projects and at the same time you can put your JS bundles (from ng build) inside of the resources/static folder (of the Spring app) and it'll work perfectly, assuming you want to run them on the same server.

You can set a proxy config to make it easier like:

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

This way whenever you do a rest call with something like Angulars HttpClient, as long as you put /api in front of the url it'll call your spring backend.

Example:

  public fetchResource(id: number): Observable<Resource> {
    return this.http.get(`/api/resources/${id}`);
  }

I prefer to have my client and api in different projects.

Whenever you want to add the JS bundles to your resources/static folder, you can just create an NPM script to do it for you in package.json.

answered Nov 11, 2018 at 15:56

abrandell

634 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rüdiger Over a year ago

Thanks! I got two points on that: 1. The first thing you mentioned (moving the JS-bundles) is only necessary when I deploy it as one single application but build it as two before? 2. If you do not use that way, you are having two applications deployed on your tomcat (or whatever server u might use) and they function as two different applications, right? But I struggle to understand WHY someone would use it one way or the other. Sure everyone has his preferences, but each of these solutions has to come with some "pro's and con's"

abrandell Over a year ago

I worded myself incorrectly. You're going to want to run ng build --prod when you're ready to deploy regardless of whether or not you're running it on the same server as your Spring Boot app. When you're still in dev, you don't need to move any JS bundles to resources/static (again, if you choose to run it on the same server). Can if you want, but don't need to. 2: You could host your angular app on GH pages and your API on heroku. It'll work fine. And the last point is really just for convenience. Look into the front-end-maven-plugin

Collectives™ on Stack Overflow

Different project structures when building an Angular App with separated Spring Backend

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related