I am trying to develop angular application with J2EE.
Server-side: Java, J2EE, Spring, Spring MVC, MyBatis, Maven
Client-side: TypeScript, Angular, Yarn, Webpack
In development environment, I would like to use webpack dev server to route angular application to spring application. I would use different ide to develop front end application and backend application which is eclipse and visual studio code.
In integration environment, they would be packaged as a single war.
What is your way to develop angular application with different back-end technologies
Top comments (6)
First of all, i'd have two different repositories for backend and frontend, so that you can develop and deploy them separately.
Second, on Angular side i always put the api url in an environment variable so that i can create builds for different backend urls by just specifying
--env=<environment_name>I also create an APIService that prepends all the relative urls i use in the app with the api url of the current environment, and adds extra request data like authentication headers etc.
About packaging them together, if you mean to deploy them to the same domain i don't think that's an elegant solution, but it can work with some extra web server configuration
Deploying on the same domain is simple using sub-domains. An API Gateway can be configured to route each sub-domain (and even every request) to a different server or cluster. For example, serve the app directly on the default domain through a CDN like S3 and setup the "api." sub-domain as the service gateway which routes requests to a private network.
Yes indeed deploying to sub domains is the preferred method most of the times. When i said to avoid deploying them to the same domain i meant to avoid having a scenario where your app is served from the same web server that serves the api, like
yourdomain.comfor the app andyourdomain.com/apifor the api.Yea, agreed. This would make scaling a hassle.
I think the most immediate recommendation is to treat your Angular application as an entirely separate package from the Spring application. Interactions between these two applications should be done entirely over web protocols (HTTP/HTTPS and JSON or WS). I recommend using Docker to create isolated networks that both of your applications can use to communicate with each other. I personally start off making a sort of mock back-end with Rails or Node while I build my front-end application. Once the mock is not sufficient and real operations need to occur, I'll swap out the mock back-end container for a real web server container. If all is configured properly, then this change will go unnoticed to your Angular application. Further, if you're crafty with your configurations and networking, each of your services can be in a different technology. Ex. My employer owns a back-end series of services that range from Java to Go to Python.
To add to this, thinking of the front end and back end as two separate things will also help you see a lot of security and us implications that may otherwise be missed. Things like auth, error handling, and how data is sent and received are all significant aspects to consider. When creating your SPA, treat the API as if it is some random API you're using on the internet. Same for when your developing the API. Never trust the client, and always validate everything.
That said I actually have my API serve the SPA, and add the base href in dynamically. This way we can deploy it to any folder structure without worrying about re-transpiling.