DEV Community

loading...

PixAI DevLog: Deployment

arndom profile image arndom ・1 min read

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 ✌✌.

Discussion (2)

pic
Editor guide
Collapse
ayanb profile image
Ayan Banerjee

Looks sleek!

Collapse
arndom profile image
arndom Author

Thanks Ayan 😁