I built an application for demo purposes that uses an Angular front-end hosted on a web server (nginx). The nginx instance, in addition to serving the compiled JS code, also acts as a reverse proxy for an application server that the browser needs to connects to. The flow is such that when I deploy this nginx on an infrastructure with any IP/FQDN, I can connect to this IP/FQDN and subsequent calls to the application server happens against the same IP/FQDN. You can see the architecture and the flow in this diagram.
The way it works is that the JS code contains an endpoint that I configure in the environment.ts file which contains this:
export const environment = {
production: true,
envName: 'prod',
appserver_env: 'http://' + window.location.host
};
Every time the code needs to connect to the app server it uses the appserver_env variable that resolves to the same IP/FQDN it pulled the JS code from.
This works just fine if I deploy my application without any security (i.e. http). It doesn't work if my webserver only works with https. I can obviously change the environment.ts to specify https instead and that would work (in a secured environment) after recompiling the Angular code.
However, I am trying to figure out if there is an easy way to tell Angular that this configuration needs to be working with EITHER http or https depending on the deployment method I am using. This is a demo application that I want to use in the most flexible way.
Any suggestion? Thanks!
Related
I have an Angular + Spring Boot app that's deployed as a single .jar file, some .properties files and a bash script to execute the .jar depending on what properties we want to use.
Right now, my .ts classes have host and port set statically, e.g.:
const PATH: string = 'http://localhost:8080/(...)';
Is there a way to set them dynamically while executing the .jar?
The question is very broad and could not be answered definitely with such minimal information. I want to point some things though which you must consider in what ever solution you apply to this problem.
The backend which is a spring boot app, may as well run in localhost:8080 and that is fine. It is never however the case that an application backend is in the same machine as the Frontend. You have adopted angular as your frontend which means by default (if you haven't overridden this behavior) some static files would be served and executed in the browser of the end user.
So this in most cases means that the end user must know the ip-address or domain so that he can reach the machine that runs the backend server.
So the end situation you will have is backend running in for example localhost:8080 in some VM and frontend using a property like const PATH: string = 'http://my-backend-domain.com:8080/(...)'; so that an external user can reach the backend server from his browser.
In a very simplified scenario an effective solution would be to adapt your angular app with this answer then during deployment decide what is the domain for example where you are deploying the app like /my-backend-domain.com and go to assets/data/config.json and configure it there. This would not require any additional build of Frontend just a simple configuration.
There are many ways to do it
environmental variables
application arguments CommandLineRunner
configuration file
I've implemented an application using socket.io. All working nicely.
Converting it to a progressive web app required SSL so I've done that and that's working nicely. The app installs as a web app and works.
My problem is that when I go back to work on new features, the local installation of the app server ignores my secure client requests (On the production system, nginx handles the SSL).
These are the offending lines in the client:
const socket_url = 'https://' + url.hostname + ':' + port;
const socket = openSocket(socket_url, {query: 'clientId=' + clientId, secure: true});
I could edit the relevant line in the client conditionally on production versus local development but I'm hoping there is a more elegant solution.
A couple ideas for dealing with the test environment vs. production environment issue:
You could get a self-signed certificate and use it locally on your https server and have your test browser trust it. Then, you run https locally. You will, of course, have to adapt your server code to be an https server also when run in the test environment.
You could set up your own NGINX locally with a self-signed certificate and have it provide the same https role that you have in production.
When running locally, your server could generate a slightly different web page that inserts http:// instead of https:// in the code you show in your question so the client would just automatically use the desired protocol (https in production and http in test). This could be done with a template engine or could be done manually with search/replace when serving the relevant script.
The client-side Javascript could use location.protocol instead of a hard code https which will then automatically use the protocol that the web page was loaded from which could then be either http or https. So, if the web page is loaded via http, then socket.io would use http. If the web page was loaded via https, then socket.io would use https.
I have an application that is comprised of an Angular front-end, an app layer and a DB layer. You can see the architecture in this image.
I am using an nginx instance to serve both the JS front-end bits to the client as well as to proxy requests from the client to the app layer. So let's say I deploy this nginx on a cloud VM with IP 18.1.1.1 (fake) I can point my browser to that IP, the client will download the JS code, and the JS code is configured, see here, to set the app server ip/fqdn to the same ip/fqdn I pointed my browser to download the ui.
At this point the nginx proxy configuration kicks in and forward all /api requests made by the JS code to a specific fqdn. Right now this is a specific FQDN just because I am deploying these components as containers and the nginx container always knows how to reach http://yelb-appserver:4567/api.
I would like now to create additional deployment methods and in particular I would like to host the Angular bits on an S3 bucket (or any other web server) and have the JS point directly to something like an API GW, a separate EC2 instance, a cloud load balancer, or anything that represents an IP/FQDN endpoint different from the IP/FQDN of the web server serving the JS files.
In this case I can no longer use the appserver_env: 'http://' + window.location.host that I have used here.
Since I would like to create a dynamic and repeatable deployment workflow (using cloudformation, or similar) I am wondering if there is a way to work with a single JS compiled artifact parametrizing the Angular code to point to the /api endpoint created at deployment time OR if my only option is, at every deployment, to 1) create/read the /api endpoint at deployment time, 2) programmatically customize the Angular code with the endpoint, 3) re-build the Angular app dynamically (now including the specific /api endpoint) and 4) finally deploy the web site with the JS code ad-hoc created with the custom /api endpoint for that specific application instance deployed.
Thanks.
Use environment variables and keep them in a config (like "environment.prod.ts" in your case), which will be given to a node process running your build. Your javascript angular code can use these variables, like for api endpoint, you can have process.env.API_ENDPOINT in you code wherever you need api endpoint. Now for supplying thses variables you can use something, as simple as, API_ENDPOINT='/api' npm run build or for more advanced approach, you can use Docker.
So I did a REST Api in Node JS and now I have a blocker.
app.use('/api', router);
This code makes sure that every url is prefixed with api. Now what If I want to serve an HTML file when the path is just "/"? Should I create another "express" application? I'm just working in localhost right now and I have to do "node server.js" to launch the server. I can't really launch 2 servers at the same time, or can I? One for the api: server.js and one for the rest of the code: client.js (that's a bad name but whatever.). I'm confused on how I have to setup things...
Thanks you for the help.
You can see that you use your api routes to, most likely, serve JSON content. Well, using the same mechanism you can configure your router to serve any other kind of content for a particular route.
So, if you would like to serve some HTML content for the root of your application, let's say a Wiki page or documentation of you API, it is as simple as:
app.get('/', function(req, res){
res.render('index.html');
});
Of course, if you are just rendering a static html page, you might just as well configure a middleware to define where you place all your static content.
app.use(express.static(path.join(__dirname, 'www')));
Where www is the directory where you chose to put your index.html page.
Having said that, if what you built was a REST API, chances are that it is intended to be reused by multiple other applications, and therefore, it is customary to that the client applications are running independently of the REST API. Some client applications may not even be Web applications (i.e. Android, iOS, desktop apps, etc). So you should take that into account before thinking in developing a Web client within the same project.
But nothing prevents your from providing a default implementation of UI that consumes your REST API within the same project/server. And yes, it is possible to run more than one HTTP server serving different applications. There are considerations you might need to take into account if you use separate servers for your API (i.e. CORS).
If you decide to serve everything within the same application, you may want to make sure there is a clear decoupling in the design in a such a way that the client application consumes and uses the rest layer as if it was independent. You should isolate the routes for the REST layer from those used for your client in such a way that if, later on, you want to make the client APP run independently you would not have a problem with that.
How about something like express-namespace to help you organize your routes?
One of my team members is working only on client-side (Javascript) development for a web app with a large and complex backend.
I would like to avoid the need for him install and configure a local copy of the backend.
However, I wouldn't want him to need to push every small change to the dev server just so that he can test it.
We thought about getting the client to make the requests directly to the dev server, instead of to the same domain (the localhost) but this doesn't seem practical due to cross-domain request policies and authentication problems (cookies aren't getting sent).
What are some elegant solutions for developing clients without having a local backend?
Depending on how complicated your backend is, you might be able to create a mock backend using a lightweight web framework like Sinatra. I've had some success with this technique, but the services I've been mocking have been fairly simple. In some cases the mock backend mostly serves static JSON files.
I use Charles Proxy to map the URIs of the dev server's web services to localhost (where I run a light weight web server that serves up my static development code).