Different project structures when building an Angular App with separated Spring Backend
up vote
0
down vote
favorite
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.
spring angular maven spring-boot
asked Nov 11 at 11:43
Rüdiger
311217
add a comment |
up vote
0
down vote
favorite
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.
spring angular maven spring-boot
asked Nov 11 at 11:43
Rüdiger
311217
1
I think the best solution is to follow the architecture ofJHipsterwhich 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 likeJWTorOauth
– zakaria amine
Nov 11 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
Nov 11 at 14:00
1
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
Nov 11 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
Nov 11 at 20:20
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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.
spring angular maven spring-boot
asked Nov 11 at 11:43
Rüdiger
311217
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.
spring angular maven spring-boot
spring angular maven spring-boot
asked Nov 11 at 11:43
Rüdiger
311217
asked Nov 11 at 11:43
Rüdiger
311217
asked Nov 11 at 11:43
Rüdiger
311217
asked Nov 11 at 11:43
Rüdiger
311217
asked Nov 11 at 11:43
Rüdiger
311217
311217
1
I think the best solution is to follow the architecture ofJHipsterwhich 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 likeJWTorOauth
– zakaria amine
Nov 11 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
Nov 11 at 14:00
1
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
Nov 11 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
Nov 11 at 20:20
add a comment |
1
I think the best solution is to follow the architecture ofJHipsterwhich 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 likeJWTorOauth
– zakaria amine
Nov 11 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
Nov 11 at 14:00
1
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
Nov 11 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
Nov 11 at 20:20
1
1
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
Nov 11 at 12:33
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
Nov 11 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
Nov 11 at 14:00
@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
Nov 11 at 14:00
1
1
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
Nov 11 at 18:44
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
Nov 11 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
Nov 11 at 20:20
@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
Nov 11 at 20:20
add a comment |
1 Answer
1
active
oldest
votes
up vote
1
down vote
accepted
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 at 15:56
abrandell
384
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"
– Rüdiger
Nov 11 at 20:27
1
I worded myself incorrectly. You're going to want to runng build --prodwhen 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
– abrandell
Nov 11 at 21:32
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
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 at 15:56
abrandell
384
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"
– Rüdiger
Nov 11 at 20:27
1
I worded myself incorrectly. You're going to want to runng build --prodwhen 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
– abrandell
Nov 11 at 21:32
add a comment |
up vote
1
down vote
accepted
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 at 15:56
abrandell
384
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"
– Rüdiger
Nov 11 at 20:27
1
I worded myself incorrectly. You're going to want to runng build --prodwhen 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
– abrandell
Nov 11 at 21:32
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
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 at 15:56
abrandell
384
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 at 15:56
abrandell
384
answered Nov 11 at 15:56
abrandell
384
answered Nov 11 at 15:56
abrandell
384
answered Nov 11 at 15:56
abrandell
384
384
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"
– Rüdiger
Nov 11 at 20:27
1
I worded myself incorrectly. You're going to want to runng build --prodwhen 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
– abrandell
Nov 11 at 21:32
add a comment |
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"
– Rüdiger
Nov 11 at 20:27
1
I worded myself incorrectly. You're going to want to runng build --prodwhen 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
– abrandell
Nov 11 at 21:32
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"
– Rüdiger
Nov 11 at 20:27
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"
– Rüdiger
Nov 11 at 20:27
1
1
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– abrandell
Nov 11 at 21:32
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– abrandell
Nov 11 at 21:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53248390%2fdifferent-project-structures-when-building-an-angular-app-with-separated-spring%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
I think the best solution is to follow the architecture of
JHipsterwhich 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 likeJWTorOauth– zakaria amine
Nov 11 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
Nov 11 at 14:00
1
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
Nov 11 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
Nov 11 at 20:20