Continuing from my last post I figured how to secure my api keys with environment variables in react and on the digital ocean app platform( much thanks to

Ayan Banerjee • Jan 2 '21

I should be deploying by now, in fact I did but I took down cos my api_keys weren't secured, I've gone through posts about hiding stuff like on github with gitignore but I can't seem to get it working in production

You can add those to environmental variables. In fact, I am using those only to hide API keys: dev.to/ayanb/medidoc-update-4-depl... 😅

The steps are as follows:

• First I created a .env file in root of my project
• edited the .env with my keys prefixed with REACT_APP:

REACT_APP_API_KEY1 = value;
REACT_APP_API_KEY2 = value;

*Then reference them where needed with

const key = process.env.REACT_APP_API_KEY1;

• Lastly specify the keys in the environment variable option on the digital ocean app platform.(don't forget to click encrypt option😉)

Feels kinda strange documenting like this but it's starting to grow on me. Anyway, here's the app link:

PixAI

Still, little details like loading overlay and some css are yet to be added but its functional and "responsive", Hope you enjoy it.

Tomorrow should be the last part of the series, stay tuned.

Later ✌✌.