Blog CVReadLibrary

Build eshop template with MEAN stack and typescript - set environment variables and build it

This section is for introducing environment variables, which we have to add for app working without any issues.

Rename .env.example to .env

# BE HOST - FOR API
SERVER_PORT=4000
SERVER_URL="http://localhost:4000"

# FE HOST - could be the same as BE
ORIGIN="http://localhost:3000"

# JWT settings - expiration and secret for JWT token
JWT_EXPIRATION="7d"
JWT_SECRET="youhavetochoseone"

COOKIE_KEY="youhavetochoseone"

# DB URI - database link
MONGO_URI="mongodb://{user}:{password}@{host}:{port}/{databaseName}"

# Emails - set sengrid
SENDGRID_KEY="set if you want have notification for order or contact from https://sendgrid.com (ADMIN_EMAILS and user will get notification)"

# Images - images save to cloudinary
CLOUDINARY_NAME="set name from cloudinary api https://cloudinary.com (for images upload)"
CLOUDINARY_KEY="set key from cloudinary api  https://cloudinary.com (for images upload)"
CLOUDINARY_SECRET="set secret from cloudinary api https://cloudinary.com (for images upload)"

# Pay - for stripe integration - payments with card
STRIPE_PUBLISHABLE_KEY="set for paying with card for orders with stripe https://stripe.com"
STRIPE_SECRETKEY="set for paying with card for orders with stripe https://stripe.com"

# Google login - with google dev console
GOOGLE_CLIENT_ID="set for google login activation"
GOOGLE_CLIENT_SECRET="set for google login activation"

# Admin emails get notification from sendgrid when order or contact are submitted
ADMIN_EMAILS="your@email.com, another@mail.com"

# Recaptcha server key from google
RECAPTCHA_SERVER_KEY="RECAPTCHA_SERVER_KEY"

# Get location from IP - https://geolocation-db.com
GEO_LOCATION_API_KEY="GEO_LOCATION_API_KEY"

# FE ENV SEND FROM BE
FE_STRIPE_PUBLISHABLE_KEY="FE_STRIPE_PUBLISHABLE_KEY"
FE_TINYMCE_API_KEY="FE_TINYMCE_API_KEY"
FE_RECAPTCHA_CLIENT_KEY="FE_RECAPTCHA_CLIENT_KEY"

  • After setting port, JWT token and COOKIE_KEY which could be any string, there is ORIGIN to set not just for google callback with login but also for to allow CORS on this port, when the frontend url is different as backend

  • DB URI - Create MongoDB database and connect it here - you can install mongoDB on Ubuntu or mac or try mlab which has free sandbox

  • SENDGRID_KEY - This is key which you can obtain from Sendgrid - just for sending mails after order is successful for the customer and for the ADMIN_EMAILS , which you can set divided by a coma. Also for the mails from the contact.

  • CLOUDINARY variables - these are for the images - after you upload image for the product or category, it will be save to cloudinary and the link will be used for product or category, it is also free as sendgrid in the basic use Cloudinary(https://cloudinary.com/)

  • GOOGLE Client variables are from google dev console as Google+ Api for the login, you have to add there domain and also set callback url for the whiteList

  • For the Card payment, there is STRIPE_PUBLISHABLE_KEY and STRIPE_SECRETKEY set in stripe, these one are for BE integration, for the FE integration there is FE_STRIPE_PUBLISHABLE_KEY - which is send to FE in config when FE is loaded

  • RECAPTCHA_SERVER_KEY - Recaptcha is also set from google - it is used in the contact form, this one is set for frontend - FE_RECAPTCHA_CLIENT_KEY

  • GEO_LOCATION_API_KEY -from geolocation-db - this one is voluntary, it is just to get location from IP to set language, but this is just for testing purposes

  • FE_TINYMCE_API_KEY - this one is voluntary too, it is for the WYSIWYG TINYMCE Editor but it should work also without it, also send to FE in config

11/18/2021