Timeout error when connecting to CosmosDB with MongoDB API

I'm currently working through the following tutorial to learn to work with Azure's cosmosdb via the mongodb API: https://learn.microsoft.com/en-us/azure/cosmos-db/tutorial-develop-mongodb-react

The finished repo for this tutorial is here: https://github.com/Azure-Samples/react-cosmosdb but so far I'm just on part 5 where you actually try to connect to the cosmos database.

I ran into an issue with the mongoose version and substituted the repo code with this found here: Error connecting to Azure: Illegal character in password with mongoose 5.0.1 but works in 4.13.9

I also downgraded my required mongodb version to 2.2.33 as it seems that the newer version of mongo doesn't work. (See the comments at the bottom of: https://learn.microsoft.com/en-us/azure/cosmos-db/mongodb-mongoose)

These two seemed to solve some of my errors, however I'm stuck on how to solve the following:

    { MongoError: failed to connect to server [react-cosmos-db-tori.documents.azure.com:10255] on first connect [MongoError: connection 0 to react-cosmos-db-tori.documents.azure.com:10255 timed out]
[1]     at Pool.<anonymous> (/Users/vhenri/Documents/dev/azure-app-service/azure-heros/server/node_modules/mongoose/node_modules/mongodb-core/lib/topologies/server.js:336:35)
[1]     at emitOne (events.js:116:13)
[1]     at Pool.emit (events.js:211:7)
[1]     at Connection.<anonymous> (/Users/vhenri/Documents/dev/azure-app-service/azure-heros/server/node_modules/mongoose/node_modules/mongodb-core/lib/connection/pool.js:280:12)
[1]     at Object.onceWrapper (events.js:317:30)
[1]     at emitTwo (events.js:126:13)
[1]     at Connection.emit (events.js:214:7)
[1]     at TLSSocket.<anonymous> (/Users/vhenri/Documents/dev/azure-app-service/azure-heros/server/node_modules/mongoose/node_modules/mongodb-core/lib/connection/connection.js:199:10)
[1]     at Object.onceWrapper (events.js:313:30)
[1]     at emitNone (events.js:106:13)
[1]     at TLSSocket.emit (events.js:208:7)
[1]     at TLSSocket.Socket._onTimeout (net.js:407:8)
[1]     at ontimeout (timers.js:475:11)
[1]     at tryOnTimeout (timers.js:310:5)
[1]     at Timer.listOnTimeout (timers.js:270:5)
[1]   name: 'MongoError',
[1]   message: 'failed to connect to server [react-cosmos-db-tori.documents.azure.com:10255] on first connect [MongoError: connection 0 to react-cosmos-db-tori.documents.azure.com:10255 timed out]' }

As far as I can tell this is just a timeout because it can't connect to my database.

Here's my code:

const mongoose = require('mongoose');
const env = require('./env/environment');

mongoose.Promise = global.Promise;

function connect() {
return(
    mongoose.connect('mongodb://react-cosmos-db-tori.documents.azure.com:10255/react-cosmos-db-tori?ssl=true', {
        auth: {
        user: 'react-cosmos-db-tori',
        password: '<mypasswordhere>'
        }
    })
    .then(() => console.log('connection successful'))
    .catch((err) => console.log(err))
 )
}
module.exports = {
  connect,
  mongoose
};

Heres a screenshot of my connection string page in Azure:

and here's my package.json:

{
  "name": "express-react-starter",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "body-parser": "^1.17.2",
    "cookie-parser": "^1.4.3",
    "debug": "~2.6.3",
    "express": "^4.15.3",
    "jade": "^1.11.0",
    "mongodb": "^2.2.33",
    "mongoose": "^5.0.7",
    "morgan": "^1.8.2",
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "concurrently": "^3.5.0",
    "nodemon": "^1.12.0",
    "react-scripts": "1.0.10"
  },
  "scripts": {
    "start": "concurrently \"react-scripts start\" \"nodemon server/server.js\"",
    "build": "react-scripts build && mv build server",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3001"
}

I also get the following error on start:

DeprecationWarning: `open()` is deprecated in mongoose >= 4.11.0, use `openUri()` instead, or set the `useMongoClient` option if using `connect()` or `createConnection()`. See http://mongoosejs.com/docs/connections.html#use-mongo-client

When I try to refresh the page that I'm expecting to see an empty array, I only see a chrome error: localhost didn’t send any data. ERR_EMPTY_RESPONSE and the following is displayed in the console: GET /api/heroes - - ms - - and I don't get the big MongoError above. But I also don't get my 'connection successful' either.

I was thinking that it might perhaps be an issue with what I put as the databasename in the connect url, so I created a collection called heroes_test and tried using mongodb://react-cosmos-db-tori.documents.azure.com:10255/heroes_test?ssl=true but the same thing happens.

Anyone know what's going on here? Am I maybe using the promise thing wrong? Any help would be appreciated!