Separate javascript frontend from java backend in build process - javascript

I'm struggling with this for quite a long time. I'm java developer so I know my ways with backend, but I'm lost in frontend world. I know how it goes all this frameworks, build tools and node.js on top.
What I want to resolve is how to separate those 2 worlds, combining gulp, jspm and maven in one project seems to be pretty painful. So my way of thinking is now to create two maven project one for BE and one for frontend SPA. The problem is backend part needs to serve the frontend and here we are.
I'd like to have SPA bundle with the most easier hook in backend just for serving the boot page or something.
I see some problems, the bundle containing the SPA will be big to download at once, is there some other way how to solve it?
Requirements:
back-end will be Spring
there will be only java app.server
back-end will be restful build completely only by maven

Related

Should I keep frontend code in src/main folder in Spring Boot projects?

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.

Why does React need to connect to a server?

I just started working with React and I came to 2 big questions that I never realized before:
Why does React need to connect to a server (localhost, deployment, etc)? Isn't it usually the backend that needs the server url, not the frontend? From my frontend experience, I would just have a .js file with jQuery doing the DOM scripting for the associated html file and that was it.
If I am making a React full stack application with let's say a .NET backend, then React will have its localhost:3000 server url and the .NET backend (ASP.NET Core) would have something like a localhost:54204. Does that mean I need 2 deployments to run that application? Is that normal, or is there some process to mesh the two?
Thank you so much for answering this, hopefully these 2 questions answered will make me fully grasp the concept of React
For the first question does react have server and why? Yes it has and its in the bundler which is called webpack. In fact it runs server script under hood and it is for development. What about the deployment when you use create-react-app and finish your app you can run npm run buld it creates a folder for bundled files. So you can use it in your backend a static files or can create different server script and deploy as an independent application.

Building SPA frontend without node/npm

I'm a back-end java developer (spring boot) and currently I'm interested in building a single page application.
What I like about SPA frameworks (mostly Vue):
Model-binding (saves boilerplate code)
Components and templates (separating code in multiple files is always good, but I don't like single file components as I feel they mix the view and logic)
Routers
However, unless you are using Node there seems to be poor integration
What I don't like:
Node (I develop backend in Java so I don't want to install node just as a prerequisite for NPM)
NPM (I already have dependency management in Maven/Gradle. I actually don't mind it as much, I just don't want to install it and manage it seperately)
I understand why stuff like Node, Npm, Webpack is necessary, it's just that I've already have Java/Spring/Eclipse doing all that for me. I have no desire to have basically two separate build processes.
TLDR: I like the direction and architecture of modern frontend, I just don't want to deal with the tools that are used.
Specific Question: How can I develop a modern SPA using Spring Boot, Gradle/Maven and Vue.js and not have to install Node/Npm/Vue cli etc. What are the best tools if there are any?
Thank you.
You can use maven frontend plugin hosted from here.
It is maven plugin that is leveraging downloading nodejs, webpack, gulp, grunt and running it on your codebase.
You will be able to run maven build and nodejs will be downloaded automatically. It will run your frontend build as well and in resulting jar you will have only necessary minified files.
However, you have to be aware that if you want to debug your frontend application it is a good idea to have those things installed and being able to run the app locally without minification of html and js files.
If you don`t want to download tools you can use helper scripts provided by authors of this plugin to use tools downloaded by this plugin.

Create one heroku app from two git repositories

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:)

Add NodeJS backend code to an Angular-seed based project

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

Categories

Resources