Angular 2 index.html - different for development and production

I need to implement snipcart in my angular 2 project. The script tag below needs to be inserted in head of my index.html file.

However, the data-api-key differs for development and production environments.. how do I do that?

<script src="https://cdn.snipcart.com/scripts/2.0/snipcart.js" 
        id="snipcart" 
        data-api-key="insert-your-key-here">
</script>

It is important that the script tag is available in the index.html file, snipcart.com will check that for security purposes.

I have tried to do this at runtime: Add the script tag without the src-url in the index.html file and then in main.ts update the tag attributes with the correct api-key value and src-url.

That way snipcart runs with the correct key, but validation from snipcart.com fails.

So I need to set the api-key at compile time. My index.html needs to be different in development and production mode.

My project is created with angular cli:

"angular-cli": "1.0.0-beta.19-3",

"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",

Thanks,

Cheers

Gerd

Solution

You could use Gulp to insert your API Key before deploying your app. You'll need to create a index2.html that will be used to create the real index.html with the good api key at deployment. In index2.html, put SNIPCART_API_KEY where the API key shoud be.

Install Gulp and create gulpfile.js

var gulp = require('gulp');
var package = require('./package.json');
var replace = require('gulp-replace');
var argv = require('yargs').argv;
var gulpif = require('gulp-if');
var rename = require('gulp-rename');

gulp.task('snipcart', function() {
   gulp.src(['index2.html'])
    .pipe(gulpif(argv.production, replace("SNIPCART_API_KEY", package.config.prod.snipcart_api_key)))
    .pipe(gulpif(!argv.production, replace("SNIPCART_API_KEY", package.config.dev.snipcart_api_key)))
    .pipe(rename('index.html'))
    .pipe(gulp.dest('.''))
});

gulp.task('default', ['snipcart']);

This Gulp file should replace the SNIPCART_API_KEY with the good key found in your package.json and create a index.html.

To call your Gulp task when needed, you can add some scripts in your package.json. You'll need to call npm run prod in your deployment process so it creates the index.html with the production key.

package.json

{
 //...
 "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "prod": "gulp default --production",
    "dev": "gulp default"
    //...
  }
 //...
  "config" : { 
    "dev": { "snipcart_api_key" : "YOUR_KEY" },
    "prod": { "snipcart_api_key" : "YOUR_KEY" }
  }
}

You could also create other scripts like "start-dev":"gulp default && npm npm start"

I did not test this solution but you should get the main idea. ;)

I'll edit if I think of something easier & cleaner.