my issue: I have server written using Spring Boot, Spring Data, MongoDB and postgreSQL. My client is written with React/Redux. I keep them in two separated git repos. Now I’d like to deploy them to Heroku. I already deployed back end but now I’m not sure how to add frontend. I’d prefer to have it as one app because then I wouldn’t have to worty about csrf.
what solutions I was thinking about: As far as I’m concerned I see two solutions:
1) deploying front end as a separated app and make calls to backend (already deployed app)
2) somehow making it into one app. I read a couple of solutions and one suggested making a Procfile, but in that question there was one git repo. Deploy two separate heroku apps from same git repo
I’m using Maven and Yarn.
If your client project is also a maven project, you can make it a dependency of your server project.
You can then make the build copy your client artifact into the src/main/resources/static folder and have your server application serve the client as static content.
Update: This link is a good guide how to do it: https://blog.jdriven.com/2016/12/angular2-spring-boot-getting-started/
It describes a multi module maven project with a spring rest backend- and an angularjs frontend module. But I am certain that the principle will work also with a react/redux frontend in a separate project.
It will require some tweaking though:)
Related
I have no fullstack code experience with Spring Boot and I am wondering what is the most proper way or common approach for keeping frontend code in Spring Boot projects.
So, should I create a folder called frontend under src/main and keep Angular or React code in this directory as shown below?
- my-app-name
|
-- src
|
-- main
|
---- frontend
---- java
---- resources
Or should I prefer src/main/resource ?
As it was already pointed out by multiple people in the comments, you should bundle the frontend and backend separately. The reason for this is also that you need to build, package and deploy them separately and you need a separate pipeline for each of them. For example your spring boot app will be built as a docker container and deployed to kubernetes while it does not make much sense to host the frontend in such way, it could be hosted in a CDN.
This leaves us with your second point - monorepo vs multiple repositories. Both have their pros and cons. You can find a lot of articles on this topic online. I assume, that this is a small project and you'll work on both frontend and backend by yourself at once. In such case, you can do very well with the monorepo approach. You can do a change across both frontend and backend in a single commit, the refactoring will be easier etc. But if you choose to go with mutliple repositories, there is nothing wrong with it.
One more thing to consider is where and how you'll manage your API contract between the frontend and backend. There are again multiple approaches here. I'd advise not to go without the API contract specs (like doing everything by hand on both server and client side) and in case you go with monorepo don't create your dependency between the frontend and backend directly (on the file level), that create unecessarry coupling between those two.
I am trying to build a Spring Boot Application where Angular would serve as frontend and Spring-Boot would serve as backend. I want to make it war deployable.
I tried searching many links on the web, the understanding I have got so far is: Spring-Boot would run on 8080 port and angular would run on 4200. I am confused as to how it would work as a single unit so as to be able to run it as an independent Spring-Boot application and also as war deployable.
I have seen other approaches on the web, creating separate war files for Spring-Boot and Angular, creating separate projects then dumping the dist generated of angular into the spring boot project but my requirement is not getting fulfilled.
I want to build a single Spring-Boot project and in the webapps folder of this project, I maintain all the Angular code. Thus I want to connect both Spring-Boot and Angular and be able to run it as Spring-Boot application and as war deployable.
I'd recommend frontend-maven-plugin, it really can do the trick.
You may check out this github repository. It's a simple Spring-boot + Angular app, only the packaging is jar and frontend code is in the separate module, but the idea of what you need seems to be the same.
This link shows using Spring Boot with Grunt to compile TypeScript. It's not exactly the same as Angular but it shows how to use the Maven frontend plugin.
You can use this open source template. It is maven multi model repository. Go to repository and click use this template button.
Template
I'm attempting to build a simple react/node/express app from scratch (not using the create-react-app). I've built out a simple back end to pass some data to the front end but am having a hard time figuring out how the two communicate. How can I run the front-end and back-end together and view the front-end with the data passed into it?
I'd like to do this all in one command. Do I have to use a tool like webpack to bundle everything together into one runnable package?
My repo can be found here, it is the react-and-express branch that I've linked to. Any help is much appreciated! Currently I'm running the app by starting index.js but that is only the backend, how do I run my front-end App.js and get the two to communicate?
https://github.com/int-a/contacts-application/tree/react-and-express
You can use concurrently to run two node commands at the same time (1 for front-end and 1 for back-end). And then use the proxy configuration in webpack dev server to alias the calls to the backend port number for the same machine.
I recently abandoned the awesome LAMP solution for Node/AngularJS and I have some serious (and noob) difficulties to begin.
I took an existing AngularJS project based on Angular Seed and I didn't figure out how can I add some backend javascript code.
In online tutorials, I always find an app.js file, in which there is some "requires" and where I can add an extra server code. To launch this kind of project I have to node app.js
In my Angular-seed based project, there is only a package.json that contains script commands.
Also, I noticed that to launch it, I have to npm start.
Where can I put my NodeJS code in this project ?
Thanks in advance !
Usually you will have two differents projects. The backend (Nodejs) and the frontend (Angular). You can expose your backend logic using a public API that your frontend will use. For example you can expose a REST API using nodejs with help of express. I recommend you to take a look at swagger that can help you to define your api.
After that using your angular app you can send different requests to that API and consume the info that receive from it.
To sum up you will have two different projects. Hope this helps
right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.
Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.
At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.
I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.
Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.