Add deployment instructions and relevant files for Netlify deployment

exercises/150.md

@@ -2,6 +2,12 @@
 
 By the end of this level you will have a React website that is available on the internet
 
-## Deployment
+## Netlify
 
-Pick your preferred deploy system and make sure you deploy your current frontend there. We prefer either Render, Netlify or Fly.io
+We will be using Netlify to deploy your application. If you haven't done so yet first make sure to [Sign up to Netlify using GitHub](https://syllabus.codeyourfuture.io/guides/deployment-netlify/first-site)
+
+This repository already has a Netlify blueprint available that will set up both the backend and the frontend components. This file is called `netlify.toml` and you can find it in the root directory. This file will be picked up automatically when you import your project, so you won't need to set up things like the "Build command" or "Publish directory" values.
+
+## Automated Deployments
+
+Netlify will link to your GitHub account and will automatically update the deployed application whenever you merge your PRs to the `main` branch. For every PR, it will also generate a snapshot of that build so you can verify if your PR is actually working before merging.

exercises/250.md

@@ -1,11 +1,55 @@
 # Level 250 - Week 2/A - Database deployment
 
-By the end of this level you will have your database running on the Internet as well
+By the end of this level you will have your database running in the cloud.
 
-## Deployment
+There are multiple providers that offer free PostgreSQL databases. ElephantSQL and Supabase are two options you can pick. ElephantSQL is a bit easier to setup and it doesn't get stopped with inactivity. On the other hand Supabase has more generous limits on it's free tier and the website allows you to administer the database much easier.
 
-If you picked Render or Fly.io you want to use their own database offering. If you picked Netlify you can use either ElephantSQL or Supabase
+## ElephantSQL
 
-## Install initial database
+ElephantSQL is a database-as-a-service provider allowing you to host PostgreSQL databases. It has a free tier allowing you to host very small databases ideal for tiny hobby projects.
 
-Make sure you connect to your online database and install your `initdb.sql` script so it contains your initial set of schema and data.
+To set up your database do the following:
+
+1. Sign up for a new account on their sign-up page: https://customer.elephantsql.com/signup Feel free to use "Sign Up with GitHub" for ease of access.
+2. Click the "Create new instance" button.
+3. On the "Plan" page you will only be able to select the `"Tiny Turtle (Free)"` plan. Do that.
+4. Set the name of the database to `video-recommendations`.
+5. No need to set tags, continue to the next page
+6. On the region page select `"US-East-1 (Northern Virginia)"`
+7. Finally click "Review" then "Create Instance"
+
+Once you do that you will be able to select your `video-recommendations` instance from the list. Do that and you'll find all of the details you need to connect to the database.
+
+## Supabase
+
+Supabase is a cloud provider providing multiple services. One of it's core services are PostgreSQL databases. Supabase's free tier is much more generous to ElephantSQL, however if the database is not accessed for a week it will hibernate the database and you will need to manually restart it on the frontend.
+
+To set up your database do the following:
+
+1. Go to their website at https://supabase.com/ and click "Start your project"
+2. Sign up using GitHub
+3. On the resulting page it will ask you to create your first project.
+4. Set the name of the database to `video-recommendations`
+5. On the database password part click "Generate a password". Make sure you copy and store this value in a secure place, preferably a password manager
+6. As a region pick `"East US (Northern Virginia)"`
+7. Finally click "Create a new project"
+
+Once your project is ready go to the project's dashboard. Then on the left hand side click Settings (it's the icon with a cogwheel) and then go to the "Database" tab.
+
+One the "Database" tab you will find your connection details.
+
+## Uploading your initial data to the database
+
+Regardless which option you have picked you will need to gather the following details:
+
+1. The server. This will be something like `flora.db.elephantsql.com` for ElephantSQL and something like `db.gfdgdfeydxfsdkhfgsdg.supabase.co` for Supabase
+2. The username. This will be something like `yqunykyc` for ElephantSQL and `postgres` for Supabase. The username and the database name will be the same in both cases.
+3. Your password. On ElephantSQL you can find on the database website. For Supabase this is what you have entered when creating the database.
+
+Now you have all of the details that you need to use on the command line to import your script:
+
+```
+psql -h server_from_above -U username_from_above database_name_from_above < db/initdb.sql
+```
+
+Postgres will ask you for your password, make sure to provide it and then check that the code runs successfully, and you might want to verify that the tables and example values are all there.

exercises/350.md

@@ -2,6 +2,26 @@
 
 By the end of this level you will have both your frontend and backend deployed to the internet, although they will not use each other.
 
-## Deployment
+## Netlify
 
-If you have been following levels 150 and level 250 this should already be done.
+If you have been following the setup steps of level 150 then Netlify should already be deploying your backend. However you still need to set up a link between your backend and the database.
+
+First obtain your database connection string. For ElephantSQL you will need to open up your database's dashboard and check the URL field. It should look something like `postgres://xxx:[email protected]/xxx`
+
+For Supabase open up your project, then go to Settings and Database. Scroll down on the page to see "Connection string" and click the "URI" button. The value should look something like `postgresql://postgres:[YOUR-PASSWORD]@db.fsdfgsdhjkfeyrta.supabase.co:5432/postgres`. You will need to change `[YOUR-PASSWORD]` to the password you set up when creating the database.
+
+To do that open up your site configuration in Netlify, and head over to "Environmental variables". Once you are there click "Add a Variable", "Add a Single Variable", and fill in with the following details.
+
+* Key: `DATABASE_URL`
+* Values:
+  * Use "Same value for all deploy contexts"
+  * Paste the value you obtained earlier for your database
+
+Once you are ready click "Create variable". This will redeploy your application. Once that is done you should be able to access your API at:
+
+
+```
+https://<your-netlify-url>.netlify.app/api/videos
+```
+
+Use Postman and make sure you can use all of the APIs tou have created - listing videos, creating and deleting videos and rating them up and down.

exercises/450.md

@@ -4,7 +4,7 @@ By the end of this level you will have both your frontend and backend deployed t
 
 ## Deployment
 
-If you have been following the guidelines of level 150 and level 250 your website should already be available and it's frontend and backend components will already be connected. Please double check to make sure this is the case.
+If you have been following the guidelines of level 150, level 250 and level 350, your website should already be available and it's frontend and backend components will already be connected. Please double check to make sure this is the case.
 
 Congratulations you have deployed your Full Stack Project to the internet! Make sure to ask a tech ed volunteer to go through your implementation and verify that it works as expected.
 

netlify.toml

@@ -0,0 +1,12 @@
+[build]
+  publish = "dist/static"
+  command = "npm run build"
+[functions]
+  directory = "server/functions"
+  external_node_modules = ["express"]
+  node_bundler = "esbuild"
+[[redirects]]
+  force = true
+  from = "/api/*"
+  status = 200
+  to = "/.netlify/functions/app/:splat"

server/functions/app.mjs

@@ -0,0 +1,17 @@
+// Netlify wrapper for express.js
+
+// This will convert your express.JS application into a serverless lambda that is compatible by AWS Lambda and Netlify Functions.
+// Note that this has a large performance impact as your entire express system needs to load up for every single request.
+// Also each request runs in isolation so you are unable to share or cache values in your codebase.
+// For example the database connection will be recreated at every call
+
+import express from "express";
+import serverless from "serverless-http";
+import apiRouter from "../api";
+
+const app = express();
+
+app.use(express.json());
+app.use("/api/", apiRouter);
+
+export const handler = serverless(app);