Develop Reference

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.

Package React + Springboot application into .war file

How can I transform a React + Springboot application into a .war file

You should be able to simply package the react production build and serve it statically from a Springboot application.
Here's a quick tutorial on how this can be done fairly easily while still being able to call API routes on the same domain.
https://www.kantega.no/blogg/webapp-with-create-react-app-and-spring-boot
P.S. This tutorial is intended for a jar build but making a war instead shouldn't be much different, might be to just change the value in the config file.

I would make docker files, and split the react app and the spring boot be. Then you create a docker-compose file and do a docker-compose up on server.

How to include JavaScript sources in startup.cs of AspNetCore?

Is there an easy way to reference JS sources from a JS project that has "JSProj/src/main.js" , "JSProj/package.json" to run at "AspNetCoreProj/startup.cs"?
So that when the asp is run, my controller from "AspNetCoreProj/Controllers/MyController.cs" binds to (launchSettings.json) "applicationUrl": "http://localhost:44709", "sslPort": 46367 AND the front-end JS App is run at, let's say, http://localhost:8080 at the same time?
So that I only need to run the asp app, not the two applications, including AspNetCoreProj and JSProj, separately.
I already installed node.js and run the JS app server using npm run build / npm run serve / yarn serve from command line, but I do not understand the concept of deploying the JavaScript sources (especially when it uses some framework like Angular) along with my ASP project, it just doesn't compile and/or run (that is to say: I'm very new to JS and its frameworks concept).
Do I really need to run a separate JS server for front-end or I can easily reference a JS project in a let's say, index.html / index.cshtml page?
edit: I need to know how to bind an asp.net core project with an angular (react.js / vue.js) project.

When a JS framework runs using serve, it will run on its own in-memory server like in angular a node.js server with its own port ,one option like you mentioned is to run manually both server and js framework, another option in ASP.NET Core is to "tell" the server to run the JS framework.
In any of this options (while developing) the JS framework will run from its own local server (in Angular a node.js) it is just that in second option the ASP.NET Core will do the serve for you, for this to happened you need to "tell" the asp core application what to do on startup, in order to do that in you need to configure startup.cs.
I think the best way is to open a new Angular project from template project in Visual Studio you can see all the settings that are needed, I will just mention that there are settings in 3 places: in startup.cs in ConfigureServices() and in Configure() as well as right click on the ASP.NET Core project => edit project there are some commands how to handle the Angular app when compiling as well some publish commands

In fact the problem was that an MVC (Web Controller app) project cannot be used to run JavaScript, It needs to be an "Angular" asp.net core web app or an asp.net core web app that's configured to use a single-page application (SPA) in startup.cs.

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

Django - AngularJs Project Structure

After researching for the days I'm yet to decide what's the best structure for the AngularJs with Django.Many projects available on GitHub and tutorials on the net using angular files in Django project's static folder.This below structure is mostly followed in Angular 1 with Django.
Project Name
app
project name
templates
static
angular_app
app1
app1.component.js
app1.module.js
app.js
angular_templates (static templates for rendering in routes)
manage.py
In Angular 2 we have to use node server and mostly as far I saw with experienced angular developers who also worked with other backend technologies, they use this structure
AngularJs Project
app1
app1.component.js
app1.module.js
angular_templates (static templates for rendering in routes)
app.js
Django Project ( or any other backend project)
app
project name
templates
static
manage.py
Advantage of this project structure:
We can use any other backend technology by replacing our backend project folder.
Only API is dependent on backend project.The frontend is completely independent of the backend.
So, the question is what's the best structure for the Django-Angular project? if the second option is good, we have to deploy our angular
and Django code separately on the same domain? If yes how to do it ?

There is a means of combining the two if you wish. I do something similar with a Rails back end and it serves me well. (Note that i'm not familiar with Django, but i assume the same logic applies.)
Assuming that the static folder in your Django project will serve anything in there as static content, i wouldn't recommend including your Angular project in that folder. Instead, let your Angular folder be a sibling folder to the static folder. However, configure your Angular project to build its final output into the Django static folder.
So, your project looks like:
Django Project ( or any other backend project)
app
project name
templates
static (receives minified output from AngularJS project)
manage.py
AngularJs Project
app1
app1.component.js
app1.module.js
angular_templates (static templates for rendering in routes)
app.js
Doing this has a few benefits:
1. The projects are still more or less separate - when doing Angular work, you work in the AngularJS folder, otherwise you work in the other folders for Django work
Deployment is simpler - you build your AngularJS artifacts (js, css, index.html) and check them in. Then deploying your Django folder deploys everything
you can still benefit from the tools of the AngularJS eco system because for all intents, it's still in its own folder and isolated.
Everything is in one repo, which can make source management much easier.
There are a couple of downsides - that you're checking in AngularJS build artifacts and that your AngularJS changes get mixed with your server side changes, but i've found that unless the server side and client side teams are completely independent, it hasn't proven to be an issue.

Best practice :
Separation of Concerns.
- Each module/component/controller should be independent from the other.
Mode of Development
- Based on the role of team (full stack developer/UI separate /Backend separate. Folder structure changes
Outstanding Style Guide Angular 1
Official style guide for Angular 2