I'm working on an Angular 2 project. I need to use restful services that cannot be exposed as CORS (the local setup is a docker container that emulates the live server), thus I need to create the angular project under the same domain.
Lets say the local domain is project.dev that already has a main web site at the root.
I was asked to build an angular 2 admin section in a sub directory (say /admin) so that it can be accessed at project.dev/admin.
When the project is done it will be easy to just copy the build in that subdirectory and have it working.
The problem is while developing it.
I'm using ancular-cli with ng serve but the site is served at localhost:4200, not the same domain, thus CORS issues.
I've tried changing it using the arguments --host and --port but the ones I need, obviously, are already used by the main site.
The partial solution was to use ng build --watch --base-href /admin/ --deploy-url /admin/ and configure outDir in anglular-cli.json to built the site in the proper location, but even if --watch is correctly rebuilding on every file changes, the browser is not refreshed as it is with ng-serve.
Unfortunately changing the server to support CORS is not an option. It is a docker container that uses JAVA as server that I'm not able to edit. Furthermore the versioned code is constantly updated by other developers.
I would like to know if it is possible to manage such a situation in a better way, mainly if is possible to serve the angular project under a local domain name while developing.
Thanks
Related
I'm using GCP App Engine with auto scaling.
If I deploy a new version of the app code (Python 3 Flask app) with a simple change for control and test purposes, lets say I add a comment to one of the .js files I am not seeing that change to the file in the browser after it has been deployed.
I have 100% of traffic being served by the new version of the app. When I look at the source code for the version I can see the comment in there, but when I clear my browser cache and visit the page I only ever get the old version of the page (without the comment in the .js).
I have tried using the --promote and --no-cache values in the app deploy command, but no use. I have added:
default_expiration: "0d 0h 0m 0s"
To the app.yaml
I have also turned on object versioning of the storage account which app engine uses to try to ensure that only a single version of the file is available to be served - still no use.
The command I'm using to deploy is:
run: "gcloud app deploy app.yaml --quiet --promote --no-cache"
I can't understand why it should be so difficult to simply deploy a new version of the app and have the app engine serve the latest files; I must be doing something wrong but cannot see what.
Would appreciate any pointers.
The files are cached (even if for a short while and sometimes it takes time to clear it).
The trick is to make the urls (for the static files) unique for each deployment. This way, the browser is loading a 'distinct' url after each deployment. For example, you could append the environment variable, CURRENT_VERSION_ID to the url for all static elements. This means having something like (assuming Python/Jinja2)
src="/static/js/my_js_file.js?{{CURRENT_VERSION_ID}}"
os.environ['CURRENT_VERSION_ID'] changes for each deployment. There's a possibility this attribute is not available in newer runtimes. If so, just dump the environment variables and look for an attribute that is always present but the value changes (e.g. GAE_INSTANCE).
You could also just generate a random number each time your App is deployed and use that instead i.e.
src="/static/js/my_js_file.js?{{RANDOM_NUMBER}}"
I have been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
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.
Does somebody know how to set up propertly websites based on angular (auto generated with yeoman) on ubuntu server?
Here is the thing, I have a project developed in angular, I generated it with yeoman (the basic example, on yeoman codelab). I can run it and see it working on my computer with "grunt serve", but I have no idea how to upload it to my server for access it from the internet.
On my ubuntu, I have installed apache2, MySQL, PHPMyAdmin, and Node (i guess I do not need apache2 for all this, but I have it anyway).
I connect with putty and the command node works fine, npm works fine too.
I am searching info, but I only found how to run a service on the node (example:node test.js) but this is not the case.
But what I want to do is to upload a website (angular) for access it from the internet...
I uploaded the "app" folder (that has the index.html, styles, controllers, views, etc) of my angular website (generated with yeoman), i uploaded it on my www directory in ubuntu, but when I access angular, or styles doesn´t work.
So, the question is: Does NODE have a "www" directory (like in apache2) where I have to upload my websites (angular websites) for access it from the internet? or I have to run it with some kind of "grunt" or "node" command?
Because i can´t run it with "node index.html", and if i access it from the internet it doesn´t work either, so... what am I doing wrong?
If you have a runnable app on local then follow these steps:
Set it up on git and host on github, bitbucket or any other git hosting and connect your server via ssh and choose/make whatever directory. (Doesnt matter which direcory, I personally prefer /var/www )
Pull that repo in that directory.
Run the app using forever or some process management tool like pm2
PS: grunt is more of a developer tool than production tool. so start your app directly using node wahtever_your_server_file_is.js in forever
Also make sure whatever port you are using to run the app is open on your server.
I'm new to Spring and AngularJS. I followed the steps here to build the back end restful API, and it sends Json upon requests. So, according to the guide, When I run "mvn spring-boot:run" the tomcat server starts at localhost:8080.
Then I used Yeoman angular generator to build my angular app. And when I run "grunt serve" inside my angular app, the front end app runs at localhost:9000.
What should I do so that my angular app can be served together with my Springboot tomcat server on the same domain, say, localhost:8080 ?
Is there a sample project that I can follow? I found the following projects, but still cannot make it work as I don't have much background on tomcat.
https://github.com/robharrop/spring-angularjs
https://github.com/GermanoGiudici/angularjs-maven-tomcat-seed
https://github.com/xvitcoder/spring-mvc-angularjs
You need to take either:
the built files (grunt build then basically everything in the dist/ directory)
the raw files (your index.html and all JS as-is)
and copy them into one of the following folders (I recommend /public/): http://spring.io/blog/2013/12/19/serving-static-web-content-with-spring-boot
Spring Boot will automatically add static web resources located within any of the following directories:
/META-INF/resources/
/resources/
/static/
/public/
This means that not only does Spring Boot offer a simple approach to building Java or Groovy apps, you can also use it to easily deploy client-side JavaScript code and test it within a real web server environment!
This is going to be a pain for development however since you will have to re-copy the files every time you make a change for the front end. For production your goal should be to deploy a versioned copy of the built files with your spring app.
For development you might want to consider letting grunt serve the Angular content and running both Tomcat and your grunt server (is it node?) and enabling cross origin requests between your front end and back end. OR you could just copy the whole angular directory into one of the above directories but that is a short term approach.