Heroku Review Apps - separated backend and frontend - heroku

I started using Review Apps which works good. However I use separated backend and frontend (rails and ember) and I would like to set connection between new PR on backend and frontend. I think the easiest way is to create new env 'integration' in ember and set api host per each PR. It is possible to define environment of built ember app on new dynamic staging?

If your Review App needs a dynamic API host, you could set it get the host from Config Vars. I would imagine it would be something like ENV['API_URL']. This approach is more in line with Heroku's stated best-practices as embodied in http://12factor.net/.
Also, if you want to have a default for new review apps, so you don't have to set this var for each new one, you should look at using an app.json schema.

Related

VueJS SPA dynamic baseURL for axios

I've searched and searched and can't seem to find a pattern for this. I'd consider myself an intermediate Vue dev, however, the backend is my strong suit. I'm working on an app that will be white-labeled by resellers. While it's possible to have multiple builds, avoiding that would be ideal. The setup is a stand-alone vue-cli SPA connecting to a Laravel api backend and using the Sanctum auth package. So I need calls to the same domain. The issue: resellers will be on their own domain. The ask: Is there a pattern/solution for dynamically loading configs (mainly baseURL) for different domains (other items would by theme/stylesheet). Currently I have a few typical entries:
i.e. axios.defaults.baseURL = process.env.VUE_APP_API_BASE_URL
Basically, based on the domain the site is being served on, I'd like a dynamic/runtime config. I feel like this has been solved, but I can't seem to use the right search terms for some direction, so anything is helpful. I've tried a few things:
1) Parsing in js, but can't seem to get it to run early enough in the process to take effect? It seems to work, but I can't get it to "click"
2) Hit a public API endpoint with the current domain and get the config. Again, can implement, but can't seem to get it to inject into the Vue side correctly?
Any resources, pattern references or general guidance would be much appreciative to avoid maintaining multiple builds merely for a few variables. That said, I don't think there's much overhead in any of this, but also open to telling my I'm wrong and need multiple builds.
End Result
url visited is https://mydomaincom
then baseURL = https://api.mydomiancom
url visited https://resellerdomaincom
then baseURL=https://api.resellerdomaincom
I don't think there is a common pattern to solve your problem - I haven't found anything on the net.
The best software design solution could be the following:
have a single back-end
distribute only the client to your customers/resellers
Obviously the back end could see the domain of the application from which the request comes and manage the logic accordingly.
Good luck with your project.
Honestly how the question is put it's not really clear to me. Although my usual pattern is to:
Create an axios instance like so:
export const axiosInstance = axios.create({
// ...configs
baseURL: process.env.VUE_APP_URL_YOU_WOULD_LIKE_TO_HIT
})
and then whenever I make a request to some api, I would use this instance.
EDIT: According to your edit, you can either release the client to each customer, and have a .env file for each and every of them, or you can have a gateway system, where the client axios end point is always the same, hitting always the same server, and then from there the server decides what to ping, based on your own logic

How to set the application domain in Heroku env var

Given an application URL on Heroru like app-123.herokuapp.com, how can I set this value into an environment variable?
I need to set an email template, with the correct links to the app, so there is no HTTP request information available, but I want to have the links with the correct URL.
I'm using Ruby on Rails and using an environment variable, but once I create review apps, with dynamic URL's I cannot rely on this.
Disclaimer: This works only for the review apps, as they are my concern when posting the question.
We can make use of the injected environment variables, as described in the documentation: https://devcenter.heroku.com/articles/github-integration-review-apps#injected-environment-variables
So, given that every application domain will be herokuapp.com we can guess the application address but concatenation of protocal, app and domain:
"https://#{HEROKU_APP_NAME}.herokuapp.com"

Checking a remote url depending upon config

I am a new NativeScript user and I am trying to understand how to have my app make a GET call to a remote server, depending upon environment. In Java world we pass in an environment variable, but I have not found an example (that I understand) demonstrating how my NativeScript mobile app will know which environment it is running in, and how to get values based upon that.
I am presuming that I will have a config/ with files such as
prod.conf.js and dev.conf.js - and there is where I will put in my urls and other config values.
How do I get my NativeScript (which I will eventually build into iOS) to reach those values to use in an http request upon startup. Any example to direction to documentation would be greatly appreciated.
Answer:
I finally got the problem solved by using Manoj suggestion of nativescript-dev-appconfig. For any newbie looking for help, try this:
{PROJECT_ROOT}/config - create the environment files as {env}.json. These files are just json, with name-value pairs of the values you want. In may case that is
When you do your build: tns build ios --bundle --env.config {dev | test | prod }
This will take the contents of the selected env.config file (ie -env.config dev and copy it as - {PROJECT_ROOT}/app/config.json .
To use it within your code,
import config from "../config.json";
axios.get(config.MY_URL).then(result => {...}
Unfortunately using environment based config files are not officially supported but there is a plugin hook you could try.
We also have webpack based environment variable support, read more about that in the docs.

Play configurations for HTTPS only on Heroku

I searched around and have found topics close to this (for example here and here) but I still can't seem to get this working so here goes.
I'm using play 2.6 and deploying to Heroku. I'd like to force the app to only use HTTPS. As the aforementioned post indicates this filter (with the proper Heoku settings) seems like it should solve my problem. But I can't seems to get it working. Basically if I do the simple setup I suggest below it doesn't redirect to https and if I try anything fancy I get errors.
I guess what I'm asking is how does one setup the Procfile, application.conf and Environment variables for the deployment to Heroku. As an FYI I'm using / I'd like to be able to use play's self signed certificates for my non production deployments in case that's causing problems.
===== For the Procfile ====
Normally a simple Procfile might look like:
web: target/universal/stage/bin/my-app -Dhttp.port=${PORT}
But without heroku I'd want to do something like this (see here)
play -Dhttp.port=disabled -Dhttps.port=443
Since Heroku sets up the port/Https automagically how do I merge these two? ie is there a heroku env var like ${HTTPS_PORT} that I should be using?
===== For the application.conf ====
Presumably we want something like this
play.filters.enabled += play.filters.https.RedirectHttpsFilter
play.filters.https.redirectEnabled = true
"play.filters.https.redirectEnabled = true" shouldn't be needed but I put it there just in case. But do I also need to specify play.filters.https.port? (see here). Something like this:
play.filters.enabled += play.filters.https.RedirectHttpsFilter
play.filters.https.redirectEnabled = true
play.filters.https.port=???
Thanks in advance.
==== Edit ===
Thanks #codefinger the answers you gave is correct. I'm going to put the details below for future reference.
As mentioned here you need to tell play to check if the request has already been secured. In this case it essentially means white listing the proxy. So the Proc file can be as simple as:
web: target/universal/stage/bin/my-app -Dhttp.port=${PORT}
But you need to enable the RedirectHttpsFilter and configure the trusted proxies. Note here I've trusted all IPs but based on your app you can restrict that (details here).
play.filters.enabled += play.filters.https.RedirectHttpsFilter
play.http.forwarded.trustedProxies=["0.0.0.0/0", "::/0"]
I think you'll need to enable the play.core.server.common.ForwardedHeaderHandler, which will detect the X-Forwarded-Proto header that Heroku sets.
TLS termination is handled by the Heroku router, which means all request are in plain HTTP when they reach your app. The only way for your app to tell if they are HTTP(S) is which this header.

How should I store my api key on heroku so that it still stays secret instead of embedding in web page code

I have built a flak app, locally I have stored it as environment variable, but I do not know how should I store my api key on heroku so that it still stays secret instead of embedding in web page code ?
Any help will be greatly appreciated.
You can store your api-key as environment variables as these are perfectly secure:
go to you local folder and run heroku config:set key_one=value_one key_two=value_two and more.
Note: run above commands in the same folder which points to your repository.
once you set the environment variable you can access this key value pair in you code directly as:
var api_key = process.env.key_one;
You can also easily add or edit your config variables from your heroku app’s Settings tab, look here at Heroku's official documentation.

Resources