How to deploy angularjs app in production without port - angularjs

I'm having an application built with AngularJS (not Angular 2) and is ready to get deployed. In Angular 2+, we'll be building the project and the output of that build command will be a set of html, js, css files with assets folder. I can keep them in my webroot(htdocs in case of Apache server) and run the application. But how to do the same in AngularJS app?
Please note that I don't want to use npm start which actually runs on a port. I've an Apache server and I wanted to place my code in that folder (say htdocs/myAngularJSApp) and I want to access it using www.mydomain.com/myAngularJSApp.
Please help. Thanks in Advance.

Actually, no need to build. Just host it and it will work.

Related

Can running npm run build to React App or ng build --prod to angular app Inject Clickjacking?

I started development of my website in Angular 9.1 and build the application via ng build --prod,
After build there were four js files generated and these js file will be referred in index.html.
a main.*.js
a runtime.*.js
2 polyfill.*.js
I used to upload all my website content to aws static website hosting and then the play begins.
When I refresh my website a clickjacking will be injected and any click to my website will take me to some random website for advertisement display.
What I have noticed is, my runtime..js is getting modified between my upload to AWS S3 bucket i.e At my local My runtime..js is completely normal but when It is accessed in browser after upload, it will have the malware injected.
Since I was not having idea that how is this happening I doubted,
npm
any npm library
nodejs
Hence to confirm that I started development in ReactJS but the result was same after uploading my website to AWS.
What else I tried is I renamed all the js file with x.js, y.js.... but still that script was getting injected.
Now I am not getting any clue that how the script is getting injected in my normal js file.
As per me only one area I can doubt
AWS?
To further experiment I removed public read access to all my objects but still that Script was loading (only that script) else every other objects were in-accessible and that strengthen my doubt.
Can somebody here please help me to get my website up and running without malware/clickjacking.
This whole runtime.*.js is modified.

Where to install Angular on Apache?

First of all, my question is not about how to install angular. I'm just getting started with this framework and already got a question right at the beginning.
Usually I create new web projects (HTML, PHP...) in the default web folder of the apache webserver (/var/www/). I did this with angular too under /var/www/firstAngularProject, but it seems the application itself is only accessible on its default port on the webserver root. In my case this is localhost:4200
When I try to open the path in my browser localhost/firstAngularProject I see the index structure and I think this could become a security issue.
So my question is where should I install the angular project or what is the usual way to install it?
When you run Angular using the cli command ng start (which I assume, based on you describing using localhost:4200) you're running the application using webpack-dev-server. This is undesirable since it's only meant for use during development, not for production.
In production Angular works just like any other frontend framework. You build the application with ng build --prod which produces a number of build artifact (in the /dist folder). These artifact are simply static files you make available through some webserver, in your case Apache, by copying the content of the /dist folder to /var/www (or whichever is your default web folder) and that's about it.

Converting AngularJS theme into normal HTML theme

I am about to develop a web application. I will use this theme- http://startangular.com/product/flatlogic-angular-material-dashboard/ for admin panel. I already installed it on my local machine following the instructions. But this is my first time of installing a html theme like this using command lines (npm, gem and gulp).
I also noticed that all the AngularJS admin panel theme are has to be installed in that way. I mean using npm and other commands. Installation is fine. When I run this command
gulp serve
It opens the browser and show the admin panel. But the problem is I do not understand the project structure.
Admin panel is working when I serve gulp. But what I want is I just want to access without serving gulp. I mean I want to move it to xampp. Then integrate with a framework(PHP). So for now when I access directly, it is not working. What I want is I just want to have simple project, something like this
/project
========
/css
/js
/view
How can I build them into it? I mean using command lines. For now I have to serve gulp to access my project. To convert it manually, I checked the index.html and there are a lot of syntax commented I am not familiar with.
eg
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
How can I convert the Angular theme into simple project to send to server for deployment? Can it be done from command lines?
Now my project is under
c:/xampp/htdocs/material_dashboard/angular-material-dashboard
When I access this
http://localhost/material_dashboard/angular-material-dashboard/src/
It shows nothing. Just white screen. No error in browser console as well.
When I access this
http://localhost/material_dashboard/angular-material-dashboard/.tmp/serve/
It is showing these errors.
All status code 404 returns.
How can I access the project without serving Gulp? From which url can I access?
Development server
Angular applications are mix of JavaScript, HTML, CSS and every paths is relative to the root of application - index.html.
In this case copy contents of dist folder. Copy whole dist folder and deploy it.
Development server just tries to simulate real one production server. If it is working on development - that one that is executed over gulp server it should also works on production environment.
Production environment
It is time to go straight with application. There are only two major steps
build it with gulp build (of course if you are using gulp and there is task like that)
copy content of the builded directory to production environment (that steps is also called deployment)
CORS issue?
AngularJS application and the backend should be executed (should run) on the same protocol, domain and port address to avoid CORS policy rules.

How can I deploy my angular 2 app on tomcat or jboss?

I have built a basic angular 2 app. However I need to deploy it on Jboss or Tomcat as I need to use it along with my Java EE application.
Thanks for your help.
You would use a bundler such as angular-cli or webpack to create the production bundle which is then served by the HTTP server. The bundler creates all required file that go into the htdocs directory. Normally Angular apps are completely decoupled from your backend server so there shouldn't be any JBoss or Tomcat specifics.
The Angular team are going to increasingly focus on angular-cli as the premier bundling solution so it might be a good idea to start there.
If you are using angular-cli you can use ng build command. It creates all static files for deploy Angular2 app into the dist folder. You must copy and paste them in webresources folder of your Web Application (WAR). At the moment I am looking for how to deploy this files easier.

Yeoman angular grunt-serve vs http-serve

I've just used Yeoman to create an Angular project that looks great when I run grunt serve. But then I decided to view it by running http-server, and the page gets displayed without the formatting and without the images. Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?
I discovered that I had to run grunt to build the project which fixes the references and places a distribution uglified version of the project in a dist folder. This ran just fine on my other server.
"Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?"
Yes, you will run into this problem on your web hosting server.
grunt-serve serves the app used the setup on your local machine.
http-server mimics how a real web hosting server would evaluate your references.
My development routine is to use grunt-serve until I have a working version and then use http-server to test it out and see if it would work before I push it to my web hosting server. As #cdavid mentioned, running grunt build from your dist directory should be sufficient for general dependency issues.

Resources