I have a spring boot app as backend and using react as front end (both are in same project). I only have the one pom file for the backend and I run the spring app manually and then do a npm start on the frontend, all works fine. What I want to do now is deploy both backend and frontend and start them up automatically. Do I need another POM file for the front end or something which will execute npm etc? Front end was created with create-react-app and currently running on port 3000 ( "start": "react-scripts start" ), my backend running on port 8080 but would be deployed to an external tomcat server.
Do I need to add the following plugin:
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
and then some execution rules in the pom?
Any information is much appreciated.
Thanks
If you want to create war in spring boot, you need to add packaging as war and spring-boot-starter-tomcat should be <scope>provided</scope>. I think yes you need to add, please check the reference in the below url,
https://github.com/spring-guides/tut-react-and-spring-data-rest/blob/master/basic/pom.xml
Ref: https://spring.io/guides/tutorials/react-and-spring-data-rest/
<packaging>war</packaging>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
<scope>provided</scope>
</dependency>
let me chip in and say something else. If you need a war as packaging, you can proceed as per Thangavel said. But I am a bit sceptical to go for a deployment like that on a production site.
Since you are using a front-end framework and spring as backend, I would suggest another way. Usually after doing a build of your front-end, you will use a http server like apache or nginx to deploy your build and then your war or jar for your spring boot project.
But if you want to keep both in the same project, you can do a build of your react project and it should be possible to import those JS files of your build in a thymeleaf or JSP view. Then you would only need to run the project on port 8080.
Here is an example for Angular. I am sure you can look for same in React.
How to include angular2/4 component in JSP page?
Please let me know how it goes.
If you want a good reference implementation you can generate a jhipster project and look at how the frontend plugin is used.
Related
I have built a basic angular 2 app. However I need to deploy it on Jboss or Tomcat as I need to use it along with my Java EE application.
Thanks for your help.
You would use a bundler such as angular-cli or webpack to create the production bundle which is then served by the HTTP server. The bundler creates all required file that go into the htdocs directory. Normally Angular apps are completely decoupled from your backend server so there shouldn't be any JBoss or Tomcat specifics.
The Angular team are going to increasingly focus on angular-cli as the premier bundling solution so it might be a good idea to start there.
If you are using angular-cli you can use ng build command. It creates all static files for deploy Angular2 app into the dist folder. You must copy and paste them in webresources folder of your Web Application (WAR). At the moment I am looking for how to deploy this files easier.
We are building single page application, using AngularJS and Spring Rest services along with spring boot. For front end build we are using grunt and for server site build maven. But we are not sure hove to build single WAR file which contains build out put from gunt and our java output.
Deployment server Tomcat.
Regards
Mahesh
You can give a try using maven-grunt plugin.
https://github.com/allegro/grunt-maven-plugin
I have the exact same setup. I am invoking grunt from maven.
From maven I invoke frontend-maven-plugin it actually downloads node binary and all node packages. And invokes grunt and bower. This essentially helps me build my project in any environment without installing node(even in Jekins server). Configure warSourceDirectory to read grunts output.
I am developing a Google Appengine Java application and I am facing a major challenge testing with the local dev server. I dumped the Eclipse tools cause I'm more flexible with Netbeans and
I am using Appengine Maven plugin for my development.
This is my sample project structure :
myapp
module-endpoints
module-web
module-ear
pom.xml
The application works when I build with mvn clean install on the root folder(myapp) and also when I use the mvn appengine:devserver command to run the module-ear application, however I can't seem to access the cloud endpoints via http://localhost:8080/_ah/api. I can only access the endpoint's API via the dynamically issued port when I access it via the admin console http://localhost:8080/_ah/admin.
The issue with this is that when testing cloud-endpoint Javascript client on the module-web project according to tutorials I am supposed to use localhost:8080/_ah/api as my url to test. Am I missing something?
If the question is still actual you could always update your pom.xml with flags so that the ports of all your modules are defined:
<plugin>
<groupId>com.google.appengine</groupId>
<artifactId>appengine-maven-plugin</artifactId>
<version>${appengine.target.version}</version>
<configuration>
<port>8080</port>
<jvmFlags>
<jvmFlag>-Xdebug</jvmFlag>
<jvmFlag>-Xrunjdwp:transport=dt_socket,address=1044,server=y,suspend=n</jvmFlag>
<jvmFlag>-Dcom.google.appengine.devappserver_module.mymodule2.port=9090</jvmFlag>
</jvmFlags>
<disableUpdateCheck>true</disableUpdateCheck>
</configuration>
</plugin>
Then you could use localhost:9090/_ah/api/explorer to test your APIs
If you have several modules deployed, you need to update your maven app engine launcher setup to recognize the different modules. See the modules sample Java app at https://github.com/GoogleCloudPlatform/appengine-modules-sample-java.
If you've already done that, then a dispatch.xml file will tell app engine how to route requests: https://cloud.google.com/appengine/docs/java/modules/routing
It worked when I made the endpoints project the default module.
dispatch.xml is ignored on devserver, the documentation states the following.
Dispatch files
All dispatch files are ignored when running the development server.
The only way to target instances is through their ports.
This means that only the default module will be reachable at the configured port (typically 8888 or 8080). I have just tested it with app engine 1.9.25 and it does not work, so no improvement has been made.
On the other hand you can always refer to the module by its port. The module's location is logged in the console when the application starts, you will see something like:
INFO: Module instance module2-auto is running at http://localhost:37251/
In my case this was useless since I was expecting to make AJAX requests to different modules by using the same host (but different urls). For instance:
I'm new to Spring and AngularJS. I followed the steps here to build the back end restful API, and it sends Json upon requests. So, according to the guide, When I run "mvn spring-boot:run" the tomcat server starts at localhost:8080.
Then I used Yeoman angular generator to build my angular app. And when I run "grunt serve" inside my angular app, the front end app runs at localhost:9000.
What should I do so that my angular app can be served together with my Springboot tomcat server on the same domain, say, localhost:8080 ?
Is there a sample project that I can follow? I found the following projects, but still cannot make it work as I don't have much background on tomcat.
https://github.com/robharrop/spring-angularjs
https://github.com/GermanoGiudici/angularjs-maven-tomcat-seed
https://github.com/xvitcoder/spring-mvc-angularjs
You need to take either:
the built files (grunt build then basically everything in the dist/ directory)
the raw files (your index.html and all JS as-is)
and copy them into one of the following folders (I recommend /public/): http://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
Spring Boot will automatically add static web resources located within any of the following directories:
/META-INF/resources/
/resources/
/static/
/public/
This means that not only does Spring Boot offer a simple approach to building Java or Groovy apps, you can also use it to easily deploy client-side JavaScript code and test it within a real web server environment!
This is going to be a pain for development however since you will have to re-copy the files every time you make a change for the front end. For production your goal should be to deploy a versioned copy of the built files with your spring app.
For development you might want to consider letting grunt serve the Angular content and running both Tomcat and your grunt server (is it node?) and enabling cross origin requests between your front end and back end. OR you could just copy the whole angular directory into one of the above directories but that is a short term approach.
I'm making Google App Engine project with SpringSource Tool Suite. I made project without maven and added libraries to lib folder and I got Spring Framework work perfectly. But the I tried to make project that uses Maven, adn I when I tried to run my app on development server it cannot find any classes.
So what should I do, so that my dependecies are actually deployed to lib folder?
Example of dependency in pom.xml:
<dependency>
<groupId>org.springframework</groupId>
<artifactId>org.springframework.core</artifactId>
<version>3.0.2.RELEASE</version>
</dependency>
Take a look at the pom.xml in my jappstart project. It's a functional GAE project that uses Spring.
Take a look at the example it covers Sprint 3, Google App Engine and maven.