title: Angular 6, should I put secret environment variables in environment.ts file?
body: <p>There are two sub-questions:</p>
  <ol>
  <li><p>Should I put secret environment variables in the <code>environment.ts</code> file?</p>
  </li>
  <li><p>The <code>process</code> variable shim is gone. If I use it, <code>tsc</code> will throw an error: <code>Cannot find name 'process'</code>.</p>
  </li>
  </ol>
  <p>Here is my thing:</p>
  <p>About Q1: I don't think put secret environment variables in environment.ts file is correct. Because these files will be a push to source code management, like GitHub, GitLab, bitbucket. It's not safe. So I think secret environment variables should be passed through <code>process.env</code>, like <code>process.env.ACCESS_TOKEN</code>, or, if use docker-compose, should put the secret environment variables in <code>.env</code> file and add this file to <code>.gitignore</code> file.</p>
  <p>About Q2: If I use Heroku to set up my environment variables, it depends on the <code>process</code> variable. Now, angular6 get rid of the shim of <code>process</code>, How can I work with Heroku? Also, using docker-compose pass environment variables through <code>.env</code> file depends on <code>process</code> too.</p>
  <p>And if use <code>.env</code> file for docker-compose, there is a new question come out: <a href="https://stackoverflow.com/questions/51355142/how-to-pass-variables-in-env-file-to-angular6-environment-ts-file">How to pass variables in .env file to angular6 environment.ts file</a></p>
  <p><strong>update 1:</strong></p>
  <p>Here is a case:</p>
  <p>First, <strong>there is no back-end</strong></p>
  <p>I use GitHub API and another open API, and there is an environment variable named <code>access_token</code>,
  If I put this in the <code>environment.ts</code> file and push my front-end source code to Github, Github will detect the secret information and give me a warning, they say:</p>
  <blockquote>
  <p>You should not put the GitHub access token in your source code and push it to repo, so they will revoke my access token.</p>
  </blockquote>
  <p>So I want to use <code>process.env.ACCESS_TOKEN</code>, but the <code>process</code> variable shim is gone in <code>Angular6</code>, how can I solve this? Should I add <code>environment.ts</code> file to the <code>.gitignore</code> file or what?</p>
  <p><strong>update 2</strong></p>
  <p>Here is another case</p>
  <p>Continue with update 1. Now, I add <code>docker-compose.yaml</code> and <code>Dockerfile</code> to run my front-end app in the <code>docker</code> container.</p>
  <p>Here is the workflow:</p>
  <ol>
  <li><p>Write <code>Dockerfile</code>, run <code>npm run build</code> command and copy <code>./build</code> directory to <code>nginx</code> static file directory of <code>docker</code> container. the <code>./build</code> directory contains <code>index.html</code>, <code>bundle.js</code> file and so on.</p>
  </li>
  <li><p>Put <code>access_token</code> and other secret environment variables into <code>.env</code> file.</p>
  </li>
  <li><p>Run <code>docker-compose up</code> to run my app in a <code>docker</code> container.</p>
  </li>
  </ol>
  <p>I think this workflow is solid. No need back-end service, the secret environment variables in <code>.env</code> and <code>.gitignore</code> contains <code>.env</code> file, so it will not be pushed to Github repo.</p>
  <p>But, the key point is <code>process</code> shim is gone. I can't get environment variables through <code>process</code>.</p>
  <p><strong>update 3</strong></p>
  <p>I think my question focus on <strong>front-end app development phase</strong>.
  I continue to use above case to explain.</p>
  <p>For production ready, the workflow is:</p>
  <ol>
  <li><p>Make a back-end service for github oauth, when the oauth workflow is done. Back-end service send <code>access_token</code> to front-end.</p>
  </li>
  <li><p>front-end login successfully, get the <code>access_token</code> from back-end service and store it in localStorage or cookie. Don't need get <code>access_token</code> from <code>process.env</code></p>
  </li>
  </ol>
  <p>But for development phase, Front-end and back-end development are separated for the general situation. So, Front-end should not depend on the back-end service.</p>
  <p>And I don't want to build the whole big system for the beginning.</p>
  <p>So I think the question is:</p>
  <p>Where to store secret environment variables and how to get within <code>Angular6</code> front-end application code? Several situations need to be considered:</p>
  <ul>
  <li>Work with PaaS Heroku config vars</li>
  <li>Dockerized(docker-compose, Dockerfile), <code>.env</code> file.</li>
  <li>Without back-end service.</li>
  <li>Add the environment variables file to <code>.gitignore</code>, don't push  to SCM(Github, GitLab and so on)</li>
  </ul>