Learn JS: FSFS – Section 13 – Deploying App to Heroku


Courses

Updated Jul 5th, 2021

Chapter Details

Chapter 122 – Pushing Our Complex App Up Onto The Web

Make sure .env is in the .gitignore file (also node_modules folder)!!!

In the heroku dashboard, go to “settings” and set environment variables. Back in your project’s root folder add a Procfile (heroku specific file with no file extension) and inside have (web: node app) where “app would be whatever your entry file is.”

In the terminal, set heroku remote by running the git command: heroku git:remote -a your-app-name. You are now ready to push by running command: git push heroku master. And that’s it! When the push is ready you will see a button labeled “open app” in the top of heroku dashboard.

Chapter 123 – Sending Email from our App using SendGrid

Examples: Sending new post, welcoming users after registering.

Using a third party is a hands off approach where you don’t have to configure the server or hosting environment instead letting the email pros handle all the details. This approach is great if you have to move hosting providers and seamlessly works on both development and production servers (avoid config headaches) and heroku doesn’t allow you to send mail directly from their servers anyway. This is a hands-off approach and the solution works right out of the box.

SendGrid is a third party service completed devoted and dedicated to sending email. SendGrid has a free plan where you don’t need to enter a credit card or anything. 40,000 emails in first month and 100 emails free each day forever. For testing and educational purposes this is more than enough to get your feet wet.

Start for Free. From the “Welcome” screen checkout “Settings” and find API key. Create an api key with full access. Be protective of any api keys. Copy api key and in your “.env” file make up a SENDGRIDAPIKEY.

Test out sending an email on the app’s post creation feature. Install the package @sendgrid/mail and In the “postController.js” file require in the package. Just under the code requiring in the package, add snippet: sendGrid.setApiKey() and pass it the api key variable you just set up.

Find the “exports.create” function and in the .then() function type sendgrid.send() and pass it an object and spell out a few properties like to: “x”, from: “y”, subject: “z”, text: “thisIsPlainText”, html: “thisIsHTMLText <strong>right</strong> here.”

In the html property you can use html tags and also use backticks to send dynamic data.

const sendGrid = require('@sendgrid/mail')
sendgrid.setApiKey(process.env.SENDGRIDAPIKEY)

exports.create = function(req, res) {
  let post = new Post(req.body, req.session.user._id)
  post.create().then(function(newId) {
  sendgrid.send({
    to: 'harrypotter@hogwarts.edu',
    from: 'test@test.com',
    subject: 'Congrats on Creating a New Post',
    text: 'Yay! You created a post.',
    html: 'You did a <strong>Great Job!</strong>'
  })
  //other code here too
  }).catch(//more code)
} 

If you want to send email with your app deployed to heroku make sure to add the apiKey as an environment variable in heroku’s dashboard. Now just push your latest files, containing SendGrid code, to heroku using the command: git push heroku master.

Head back to the complex app summary