How to Handle Passwords in a Vue Project
If you work for the City of Philadelphia, you can add Cyclomedia and Pictometry widgets to your mapboard (or layerboard) app.
These widgets require passwords for those services to be passed within your code. You can't put the City of Philadelphia's passwords for these services directly into your code and push it up to Github however.
To get hidden passwords into your project, create a file at the base of your project called .env.local
If you check your .gitignore file, .env.local should already be in it automatically. If it is not, add it to the .gitignore
In your .env.local file, add passwords like this (with no spaces, quotes, or semi-colons):
VUE_APP_CYCLOMEDIA_API_KEY=*your-api-key*
VUE_APP_CYCLOMEDIA_PASSWORD=*your-password*
VUE_APP_CYCLOMEDIA_USERNAME=*your-username*
VUE_APP_PICTOMETRY_API_KEY=*your-api-key*
VUE_APP_PICTOMETRY_SECRET_KEY=*your-secret-key*
They have to start "VUE_APP_...", or they won't be available in your code.
As long as they do start that way, the passwords will be available anywhere in your vue code as:
process.env.VUE_APP_CYCLOMEDIA_API_KEY
process.env.VUE_APP_CYCLOMEDIA_PASSWORD...
Vue's instructions for this are here: https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
If you are using Travis to push the files to Amazon S3, it will only have access to files that are in Github.
Since .env.local can't be put into Github, this will break the process which gets the passwords into your code.
The way to fix this is to also put passwords into Travis' Environmental Variables:
Then you add the following lines to your travis.yml file:
env:
- VUE_APP_CYCLOMEDIA_API_KEY=$CYCLOMEDIA_API_KEY VUE_APP_CYCLOMEDIA_PASSWORD=$CYCLOMEDIA_PASSWORD VUE_APP_CYCLOMEDIA_USERNAME=$CYCLOMEDIA_USERNAME VUE_APP_DEV_PICTOMETRY_API_KEY=$DEV_PICTOMETRY_API_KEY VUE_APP_PICTOMETRY_API_KEY=$PICTOMETRY_API_KEY VUE_APP_DEV_PICTOMETRY_SECRET_KEY=$DEV_PICTOMETRY_SECRET_KEY VUE_APP_PICTOMETRY_SECRET_KEY=$PICTOMETRY_SECRET_KEY