Deploying to Vercel

Step 1: Set up MongoDB hosting

There are a few different options to get a MongoDB server that you can use with Vercel. We've chosen MongoDB Atlas because it can be set up without entering any billing information, and their free tier should be enough to get projects off the ground.

1. Create an account on MongoDB Atlas.
2. Once you log in, you'll be prompted to create a new project, and then a new database. Choose the "M0" (free) option. You can configure it however you like; the platform and region shouldn't matter.
3. You'll be prompted to set some security options. You can go ahead and create the auto-generated user, but make sure to save the password. For the IP address allow list, add 0.0.0.0/0. This will allow any machine to connect to your databases (with the correct username and password).
   Note: We need to allow any IP address because Vercel will run your API from multiple machines, and there is no way to know their IPs.
4. (Optional) You can create addition users in the Database Access section if you want. You may want to, for example, use a separate username and password for your app vs. when you connect via the Mongo shell.
5. Click the COnnect button and choose Driver. You should see a URL that starts with mongodb+srv://. Copy this URL and replace the username/password.
6. You can confirm that this URL works by running mongosh "YOUR_URL" (the quotes may be necessary to avoid special characters confusing your terminal.). On Windows, if you double-click mongosh.exe, you can paste (right-click) the URL when prompted for the host. You should be able to connect and use normal mongo shell commands, like show dbs and use somedatabase.
7. Keep that URL around for the next step. Note that this URL contains a password, so you don't want to put it into your code or inadvertantly share it. Anyone with the URL will have access to your database.
8. You can run scripts on the Atlas database with mongosh "YOUR_URL" script.mongodb. By default, the Atlas user can't run db.dropDatabase() (you can drop the database from the web interface), and you'll have to use db = db.getSiblingDB("your_database_name") instead of db = connect(...) as the first line.

Step 2: Prepare your app

The project starter zip already has a few things you need to get your app running on Vercel (in particular, you should have a vercel.js and vercel.json, and we have done npm install vercel).

You'll need to make a couple small code changes:

1. (Optional) Remove the updater:
2. Use process.env.MONGODB_URL: You need to have your app connect to a different MongoDB server when deployed. In api/index.js, define a new variable, such as:

   const MONGODB_URL = process.env.MONGODB_URL || "mongodb://127.0.0.1";

   and use it when you connect:

   let conn = await MongoClient.connect(MONGODB_URL);

3. Use process.env for other "secret" variables: For example, if you followed our instructions to set up Google authentication, you will have a JWT_SECRET. You should do the same thing you do with MONGODB_URL, so you can set the variable to a different value when deployed.
4. (Optional) Use dotenv to manage secets locally: If you'd prefer to keep the "local" values for these variables (like "mongodb://127.0.0.1") out of your code as well, you can set up dotenv:
   1. Run npm install dotenv
   2. Import it at the top of your server.js:

      import "dotenv/config";

   3. Create a file called .env (not the leading dot). In it, add your variables like this:

      MONGODB_URL="..."
      MY_SECRET_VAR="binky"

      These are the "local" values that will be used when running the app on your machine. You will be able to set different values for hte app running in Vercel.
   4. In your backend code, use process.env to access these values, e.g. const MONGODB_URL = process.env.MONGODB_URL.
   5. Make sure your .env file doesn't get added to your Git repository (e.g. add it to .gitignore), so you don't accidentally share any secret values.

Step 3: Set up the Vercel app

1. Create a free account on Vercel and verify your email address.
2. In your project directory, run npx vercel. This should prompt you to login, and then you will be asked some questions to create a project. Follow the instructions, choosing a name for your project; you shouldn't need to modify any of the detected settings.
   Note: Vercel also has an option to connect your account to Github. THis should allow them to pull code from there, instead of you manually running npx vercel. I haven't tried this, but the rest of these instructions should be the same.
3. You should be agiven an "Inspect" URL and a "Production" URL. Your app is now running at the production URL, but it won't be able to connect to your MongoDB Atlas database yet.
4. Open the project's settings in the Vercel web interface (e.g. open the inspect URL, then click the project name on the top bar, then click Settings), and click "Environment variables."
5. For each "secret value" you created above, add it as the key, with the value you want to use. E.g. add MONGODB_URL as a key, and the mongodb+srv://... URL (without quotes) as the value.
6. You'll need to deploy the project again for these changes to take effect. Run npx vercel --prod. This is also how you can deploy any updates.
7. Go to the production URL, and your app should be running!