Scully: Render pages over https

[msacket]

🐞 Bug report

Description

After completing the below reproduction, etc... it occurred to me that this is probably more of a feature request, as this isn't directly a problem with Scully.

The issue is that when using AngularFireAnalytics, the googletagmanager script gets injected with an http url upon render. I suppose it's using some sort of protocol relative URL (though I could not find where in the firebase or angularfire codebase). And... since the Scully renders the pages over http, that protocol relative script is retained in the outputted html file and fails to load when deployed over https.

Since deploying over https is the prevailing recommendation, it would be nice if ScullyServer could emulate that.

🔬 Minimal Reproduction

$ ng new scully-test
$ ng add @angular/fire@next
$ ng add @scullyio/init

// Configure AppModule with firebase (with analytics)

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAnalyticsModule } from '@angular/fire/analytics';

import { environment } from '../environments/environment';
import { ScullyLibModule } from '@scullyio/ng-lib';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireAnalyticsModule,
    ScullyLibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

$ ng build
$ npm run scully
$ firebase deploy --only hosting

💻Your Environment

Angular Version:

Angular CLI: 9.0.1
Node: 13.3.0
OS: darwin x64

Angular: 9.0.0
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.1
@angular-devkit/build-angular     0.900.1
@angular-devkit/build-optimizer   0.900.1
@angular-devkit/build-webpack     0.900.1
@angular-devkit/core              9.0.1
@angular-devkit/schematics        9.0.1
@angular/cli                      9.0.1
@angular/fire                     6.0.0-rc.1
@ngtools/webpack                  9.0.1
@schematics/angular               9.0.1
@schematics/update                0.900.1
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

Scully Version:

 "@scullyio/init": "0.0.22",
 "@scullyio/ng-lib": "latest",
 "@scullyio/scully": "latest",

🔥 Exception or Error

<meta charset="utf-8">
<title>ScullyTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style> <!-- Removed styles --> </style>

<!-- First tag insertion is http -->
<script type="text/javascript" async="" src="http://www.googletagmanager.com/gtag/js?id=G-SOMEID&amp;l=dataLayer&amp;cx=c"></script>

<script charset="utf-8" src="firebase-auth-es2015.js"></script>
<script charset="utf-8" src="firebase-analytics-es2015.js"></script>
<script id="scully-transfer-state"></script>
<style> <!-- Removed styles --> </style>

<!-- Second tag insertion is https -->
<script src="https://www.googletagmanager.com/gtag/js?l=dataLayer" async=""></script>
<script>window['ScullyIO']='generated';</script>

[SanderElias]

A quick solution would be a plugin that scans your results, and replaces http with https,
However, we are already looking into supporting https during development, which will solve your issue too.

[msacket]

Good idea @SanderElias. I'm working on a plugin now that will allow you to do a regex replace on the html contents. I'll publish it when it's finished.

[msacket]

The plugin is ready to go and available for install here:
https://github.com/gammastream/scully-plugins/tree/master/projects/scully-plugin-regex

[jorgeucano]

hey @msacket Can I close this?

[msacket]

@jorgeucano Yes sir. I'll close it.

[SanderElias]

@msacket We so support SSL now. So you can run fully in SSL mode.

[msacket]

Thanks @SanderElias. That's fantastic!