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
Related
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 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
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
I am developing a web application using Sailsjs for the backend and Angular.js for the front end. To scaffold the Angular app I have used yeoman with the angular generator and for the back end I used the default Sails app generator.
During development I run 2 servers, the 1st is the sails server to host the back end and the second a grunt server for the front end.
For now my configuration works fine but when in production I want to combine the two ends in one and have sails server serve the angular web app...
Can someone explain how to do this?
I haven't used Sails before but it looks like it generates an assets directory. If you'll notice, Yeoman created an "app" directory into which it put the index.html, JavaScript, styles, etc. It appears you could transfer the contents of the Yeoman "app" directory to the Sail "assets" directory and it would be served up.
http://sailsjs.org/#/documentation/concepts/Assets
If no one with specific experience with Sails shows up, maybe that will help some.
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.