Deploy Angular app in Wildfly together with the REST api it is using?

Question

I made an AngularJs application that just uses my REST api backend (built in Java and deployed on Wildfly).

I made my servers accessible from the Internet using my public IP address (through port-forwarding).

My question is how can I make the Angular application accessible as well from the Internet using my public IP. Can I also deploy it on Wildfly? How do I do that?

Answer 1

If you don't want to deploy a WAR/EAR, try defining a handler in your standalone.xml configuration file:

<server name="default-server">
    <http-listener name="default" socket-binding="http"/>
    <host name="default-host" alias="localhost">
        <location name="/" handler="welcome-content"/>
        <location name="/yourapp" handler="static"/>
    </host>
</server>
<handlers>
    <file name="welcome-content" path="${jboss.home.dir}/welcome-content" directory-listing="true"/>
    <file name="static" path="/var/yourapp" directory-listing="true"/>
</handlers>

Answer 2

You could package your angular application in the same application as your REST backend API.

For example, if you package your REST api within a .war package, you could put your anglar application files (html pages, js scripts, ...) in your WAR package root, and your REST resources in WEB-INF/lib directories packaged as JAR files.

See WAR packaging details here.

Then to query your REST api, you just have to provide the resource URI, not the base URL (including webapp context), as angular app belongs to the webapp which also exposes your REST api.

For example, if you want to get one of your resource, you can do like this with angular: (with your REST API using 'rs' path in application config and using $http angular service)

$http.get('rs/icecreams?flavoor=strawberry')

Answer 3

I have an angular2 app whith routes, and was necessary an additional configuration. This is the process:

1. In the root module enable use hash for your routes:

   RouterModule.forRoot(routes, { useHash: true })
   

2. Build the application, the simple way is ng build other options in angular-cli build

3. The build process generates angular app in "dist" folder in root of angular app. Copy all files inside dist folder to root of your WAR file.

4. Acces to angular app in http://SERVER_IP:PORT/WAR_PATH/#/. All routes for angular app start from #/.