DEV Community

Nabil Alamin
Nabil Alamin

Posted on

PixAI DevLog: Deployment

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

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;
Enter fullscreen mode Exit fullscreen mode

*Then reference them where needed with

const key = process.env.REACT_APP_API_KEY1;

Enter fullscreen mode Exit fullscreen mode
  • 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 ✌✌.

Top comments (2)

Collapse
 
ayanb profile image
Ayan Banerjee

Looks sleek!

Collapse
 
arndom profile image
Nabil Alamin

Thanks Ayan 😁