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
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.
Im building a React Nodejs web application and Im trying to understand how to bundle the frontend with webpack. [
This is my project structure
Where should I install webpack and configure webpack.config.js? Most of the project structures I have seen put the frontend folder inside the backend folder, also in some projects they also bundle the backend separately. Can someone give me an explanation on where to implement it with this folder structure? I'm really confused
This article was kind of getting to the point but didnt solve my question
Webpack should be part of the frontend repository, so it should go into the frontend/package.json. Similarly, just like frontend/eslintrc.json is your linting settings for your frontend, you should create a frontend/webpack.config.js for your frontend webpack config.
Since you're in VSCode, it looks like, when dealing with just the frontend, you could consider making things easier on yourself by going to File -> Open Folder -> select the Frontend folder, and then you can easily operate on it, its package, and everything it contains (without getting mixed up with the backend at all).
Where your frontend folder goes is up to you, but your current approach is fine - organizing to have a /frontend and a separate /backend folder in the same parent directory if you wish.
I'm trying to add React to an existing SailsJS app. The Sails docs say that you can use any front-end framework, but I didn't see in the docs how to do this properly
You can add the compiled frontend files to the assets folder, e.g. /assets/index.html or /assets/js/script.js.
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 made an AngularJS App on its own and a NodeJS app seperately, but what I'm trying to do now is make a fusion of both. Either by putting the nodeJS app inside the AngularJS App or the other way around.
I know that it's better to have NodeJS app serve API that will be consumed by AngularJS App but I only want one server for the whole thing and I think it's doable since when I make an AngularJS app there is already a folder called "node_modules".
The structure of my project now is :
AngularApp folders (in which there is the whole AngularJS app)
node_modules (in which I loaded express, mysql and what I'd need in Node.js App)
independently: NodeApp.js (the NodeJS app that contains the code of node)
However, when I run app.js/index.html it throws the following error: "can't get index.html", meaning that even though they're in the same project, AngularJS and NodeJS don't communicate. Can you please help me with this? How can I make the link between AngularJS and NodeJS if I want to make them both in the same Webstorm project?
Thanks in advance.
I found this in my research:
http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/02/13/how-to-use-nodejs-express-and-bower-to-create-angularjs-apps.aspx
it is what I want to do but I didn't understand everything since it's easier using Webstorm
You should start a new app using Express Generator and check out the folder structure it creates.
I have a small app built with expressjs and angularjs, here's the folder structure:
bin
config
models
node_modules
public
javascripts
In here all the angular crap (in sub folders of course)
routes
test
views
index.html (this is my main html file, here is where angular loads)
app.js
To do this I had to change the views engine to work with .html
Then when you access localhost:3000 the server renders index.html (localhost:3000/#/) which loads angular and all the crap along.
All my angular resources go to /api/yourModel.
So if you access localhost:3000/api/yourModel you are accesing the api directly.
For me this works just fine, and as you say you have everything together. The front end and the server in the same "project" sort of speak.
As suggested by user1655756 , what I did was make a new nodeJS application and then instead of public, I injected the angularJS app folder.
Then as suggested by Shaffanhoon in node.js I specified the path to my index.html and that's what worked for me ..
Thank you for all your help