Heroku deploy not working

[LarryBarker]

I have my heroku app created and have successfully pushed to heroku. I also have my mLab db setup fine. Unfortunately, I cannot register/login successfully from heroku.

https://lmb-meanauthapp.herokuapp.com/

Note, after registering, it says that I have registered but there is no collection made in my db.

When I try to log in, I get an error: Refused to load the font '' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

I've also seen an Internal Server Error when trying to log in.

One thing I'm confused about is how when were working in dev mode on localhost, we run two servers (one for backend and one for frontend). This logic seems to go away when we deploy to heroku.

Has anyone had this problem or know how to work around it? Thanks.

Steps to reproduce:

• [ ] Visit https://lmb-meanauthapp.herokuapp.com/ Works, no errors.

• [ ] Click '[Register]'(https://lmb-meanauthapp.herokuapp.com/register) Seems to work, no errors. Note: User message about callProdMode() to enable production mode.

• [ ] Fill in registration form and submit. Seems to work. See screen shot: However, there is no collection created in the db on mLab:

• [ ] Try to login with new account. This does nothing and produces the following error: error_handler.js:54 EXCEPTION: Response with status: 503 Service Unavailable for URL: https://limitless-tor-36102.herokuapp.com/users/authenticate

• [ ] Refreshing either the register or login page will produce an "Internal Server Error" on the page.

[tomcatbuzz]

Did you build the app in the end (ng build). If you follow the videos and double check the current changes/updates in Brad's github repo you might just have a typo somewhere. Make sure when running in dev you have no errors in the console.  In the app mongo for dev was run locally. Production uses the Mlab mongo settings. In your config folder in the database.js for production if I am not mistaken (been awhile since I built this) you comment out the mongo local for dev and leave the mlab mongo production before deploying. It might even be mentioned to change or add this line to App.js for deployment const port = process.env.PORT || 8080;

Also in your angular-src files in the environment.ts files you change the env.ts Production to true, and false for the other env file. Console log is saying you are running angular in development mode still.

It lets me register like you mention and hangs at login. Looks like authentication failed. Try to login and check the dev tools and console log, it is giving errors there. You can also look at the Heroku logs for the app to see if points to any problems. You have to hunt down what is causing the error.

[LarryBarker]

Yeah, so my dev mode runs perfectly fine. It is only when I try to deploy on heroku that it hangs up. Also, just out of curiosity, I cloned Brad's repo, and tried to deploy to heroku and seem to be having the same problem.

To the mongo point, I do have the mLab db setup and am using the right setting in config/database.js

I also have the port changed in App.js as well.

Regarding the environment.ts files... I don't remember hearing that mentioned anywhere in the video which would explain why I didn't do anything to them. The environment.ts says you can run ng build --env=prod to use the production environment.ts file One note here, Brad's repo contains a new line in auth.service.ts:

  constructor(private http: Http) {
      this.isDev = false;  // Change to false before deployment
      }

I added the property just to see what will happen.

As far as the ability to actually register... it accepts the form but does not change anything in my database which I don't get at all. I just started up the dyno on heroku again and watched the logs and I get this error: UnhandledPromiseRejectionWarning: Error: Username contains an illegal unescaped character

So that's telling me its not connecting to the database. My config/database.js:

module.exports = {
    database: 'mongodb://<username>:<password>@ds221271.mlab.com:21271/meanauthapp', //prod
    //database: 'mongodb://localhost:27017/meanauth', //dev
    secret: 'shhh'
}

Just for clarification here, should the username/password be wrapped with <> or no?

I've made some of these changes just to troubleshoot and am going to try deploying again. Wish me luck and thanks for getting back to me here.

[LarryBarker]

Alright, so I got everything working. Had to make a few changes:

• [ ] Add the following code to auth.service.ts:

  ...
  isDev: boolean;
  
  constructor(private http:Http) { 
  this.isDev = false;  // Change to false before deployment
  }
  ...

• [ ] Remove the <> wrapper from around the username and password for production database in config/database.js:

  module.exports = {
  database: 'mongodb://username:password@ds221271.mlab.com:21271/meanauthapp', //prod
  //database: 'mongodb://localhost:27017/meanauth', //dev
  secret: 'shhh'
  }

• [ ] Add { useMongoClient: true} to the mongoose.connect line in app.js:

  // connect to db
  mongoose.connect(config.database, { useMongoClient: true});

• [ ] Finally, run ng build --env=prod to build using production variables

My final heroku deployment can be viewed at lmb-mean-auth-app.herokuapp.com

Thanks!

[tomcatbuzz]

Great, job. You were probably close, but it looks like you did good troubleshooting and nailed all the elements in your process.  On Friday, June 29, 2018, 10:39:57 AM EDT, Larry Barker notifications@github.com wrote:

Alright, so I got everything working. Had to make a few changes:

• Add the following code to auth.service.ts: ... isDev: boolean;

  constructor(private http:Http) { this.isDev = false; // Change to false before deployment } ...

• Remove the <> wrapper from around the username and password for production database in config/database.js: module.exports = { database: 'mongodb://username:password@ds221271.mlab.com:21271/meanauthapp', //prod //database: 'mongodb://localhost:27017/meanauth', //dev secret: 'shhh' }

• Add { useMongoClient: true} to the mongoose.connect line in app.js: // connect to db mongoose.connect(config.database, { useMongoClient: true});

• Finally, run ng build --env=prod to build using production variables

— You are receiving this because you commented.

Reply to this email directly, view it on GitHub, or mute the thread.

| | Virus-free. www.avast.com |