# Deployment
After you've completed coding your system, it is time to deploy it to remote servers so everyone with internet can access it. To introduce you to different technologies, we are going to deploy the backend using **Render**, and the frontend using **Vercel**. Feel free to share the deployment link (*not the code*) with family and friends, or you may even want to showcase it on your resume!

:::danger
Please ensure any URLs / project IDs you choose are anonymous and do not have your name, since we use anonymous grading.
:::

## Deploying the Backend
First, we'll want to deploy our backend service to **Render**. Render is a unified cloud to build and run web applications instantly from GitHub. It automatically builds and deploys your service every time you push to your repository and features native support for Node.js applications.

:::success
**Creating an Account on Render**

- First, navigate to render.com. If you don't already have an account, click the **Get Started** button in the upper right hand corner to create an account.
:::

:::success
**Creating a New Web Service for our Application**
- Once you have an account and are logged in, we are ready to begin deploying our backend code. You should see a page that looks like the image below:


- Click on **New Web Service** on the Web Services widget, which should take you to a page that looks like this:


- Here, under the **Connect a repository** heading, click on the blue **Connect to GitHub** button.
- You should now see a page that looks like the one below.


- Click the green button that says **Authorize render**. It will take you to a page where you can see all the information about your repository.
- Under the **Repository access** button, choose the option that says **All Repositories**. Render will then take you back to the original page where we initially created our web service.
- Now when you click on the **New Web Service** button, you should see the option to choose which repository you'd like to create a web service from under the **Connect a repository** option.
:::

:::success
**Configuring our Web Service**
- You should now see a page that looks like the one below.


- For the **Name** field, pick a name for you new web service (make sure that you don't include any identifying information).
- For the **region**, selected **Ohio (US East)**.
- For the **Branch** field, ensure that the **`main`** branch is selected.
- Next, for the **Root directory**, make sure that you enter **`server`** (since we have our server and client in one repo, it's crucial that we only deploy a subfolder of the whole repository).
- For the runtime field, set it to **`node`** and set the **build command** to **`npm ci; npm run build`**.
- Lastly, the **start command** should be **`npm run prod`** (for the payment option, check the free option).

:::

:::success
**Environment Variables and Build**

We need to specify the MongoDB connection URI used to connect to our MongoDB deployment and which port our application needs to start on.

- In the Environment tab (located in the menu on the left hand side of the your web service), copy over the environment variables (`DB_URI` and `PORT`) and their respective values. Click **Save Changes**.
- Once the build completes, your service starts, and it is listening on a port, you will be able to connect to the service.
- You should be able to see **Build Successful** in the log of your application if it compiles successfully.
- Afterwards, you can click on the blue link shown below to open the web service.


- Upon clicking the link, you should be taken to a page where "MyHypermedia Backend Service" is rendered on the DOM.
- Additionally, the message you should see in the log will be


:::

:::warning
**Common Issues:**
- If you have issues within the build of your application, you may receive a link to a page that looks like the following.


- You can view the deploy logs via the Render dashboard to see the errors that occurred during the deployment.
:::

:::success
**TODO:** Put your backend Render URL in the assignment `README.md`
:::

Now, let's move on to deploying the frontend!

## Deploying the Frontend
We will be deploying our frontend using **Vercel**, which is a platform for deploying React sites. It is a **frontend-as-a-service** product that makes it easy for software engineers to deploy and run the user-facing parts of their applications.

The first step is to change the endpoint in our frontend to point to the remote backend service that we just created.

:::success
**Changing the Endpoint:**
- Navigate to `endpoint.ts`
- Update the `prodEndpoint` variable to point to your backend deployment.
- For example, `const prodEndpoint = "https://test-web-service-ouio.onrender.com/"`;
- Be sure to **include the trailing slash** at the end of your url!
- Commit your changes
:::

:::success
**Installing and Logging into Vercel**
- The next step is to install Vercel on your computer. Run the command `npm i -g vercel`.
- Navigate to vercel.com and click **Sign Up** if you don't already have an account. Select the **Hobby** option, type in your name, and then select Continue.
- Next, click **Continue to GitHub**.
- Once you are signed in, head back to the terminal. Type in `vercel login` to log in to the Vercel CLI there. Use the arrow keys to navigate and the spacebar to select **Continue with GitHub**. You should then be taken to a page that looks like the one below.

:::

:::success
**Creating the Web Application using Vercel**
- Upon success, you can close that page and return to the terminal. Run the command `vercel` within the `client` folder of your project (It is important that you are in this folder!)
- You will see a prompt that says something similar to `Set up and deploy “~/Desktop/cs1951v/unit4-features-solution/client”? [Y/n].` Type in **`Y`**.
- Next, you will see a prompt that says `Which scope do you want to deploy to?` It should default to your GitHub username/email and you can just simply press the **Enter/Return** button on your keyboard.
- Afterwards, it will say `Link to existing project? [y/N].` Type in **`N`**.
- You will then be asked to enter in a project name. You can name it anything, but make sure that you don't provide any identifying information, since we grade anonymously.
- You will now see a prompt that says `In which directory is your code located? ./`. For this prompt, you can simply type in `.`. You will end up with a page that looks like the image below.


- For the `Want to modify these settings?` prompt, type in **`N`**. Once you are done, you should see the following in your terminal.


- We will use the link labeled **Production**. If you only see a link with "Preview", you can type `vercel --prod` and you will be provided with a production link. Ensure this link does not contain anything that can identify you!
:::

:::danger
**Re-deploying after you have made code changes**

If you continue making frontend code changes after you have deployed, you may need to deploy again. From your `client/` folder, you can run `vercel --prod` to redeploy your frontend. Your backend should automatically redeploy when you push to GitHub, so no further action is necessary.
:::

All done, have fun! If everything runs smoothly, you should see your app deployed on Vercel. Vercel gives you the URL of the app upon successful deployment.

You just deployed a fully-fledged, full stack hypertext system. **Open your frontend deployment, and test it as a user!**

:::success
**TODO:** Put your frontend Vercel URL in the assignment `README.md`
:::