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

Environment Variables

This section is dedicated to introducing the necessary environment variables required for the app to work without any issues. Follow the steps below to set up the environment variables:

1. Rename the .env.example file to .env.

2. Configure the following environment variables:

   # 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 SendGrid
   SENDGRID_KEY="set if you want to receive notifications for orders or contacts from https://sendgrid.com (ADMIN_EMAILS and users will receive notifications)"
   
   # Images - images saved to Cloudinary
   CLOUDINARY_NAME="set name from Cloudinary API https://cloudinary.com (for image uploads)"
   CLOUDINARY_KEY="set key from Cloudinary API https://cloudinary.com (for image uploads)"
   CLOUDINARY_SECRET="set secret from Cloudinary API https://cloudinary.com (for image uploads)"
   
   # 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 receive notification from SendGrid when orders or contacts 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"
   

   Note: Modify the values accordingly.

3. After setting the port, JWT token, and COOKIE_KEY (which can be any string), set the ORIGIN to allow CORS on the specified port. This is important not only for the Google login callback but also for enabling CORS when the frontend URL differs from the backend.

4. Configure the DB URI to connect to your MongoDB database. You can install MongoDB on Ubuntu using this guide, on macOS using this guide, or try using mlab for a free sandbox.

5. Obtain a SENDGRID_KEY from SendGrid. This key is used to send emails after a successful order for both customers and the ADMIN_EMAILS specified (separated by commas). It is also used for sending emails from the contact form.

6. Set the CLOUDINARY variables for image management.