Deploying your site to Render. For this class, we will be using Render to deploy your backend and your frontend separately. You will need to sign up for Render (link here). You can read the official documentation here: https://render.com/docs/your-first-deploy.

During Recitation 9, we also provided more detailed instructions (with images) beginning at Slide 19 here.

  1. After you have signed up for Render, launch the Render Dashboard here: https://dashboard.render.com/.
  2. Deploy your frontend as a Static Site. In the top right corner, hit the +New button and select Static Site.
    • For the “Source Code” field, under the “Git Provider” tab, click the GitHub link under “Connect your Git provider”. This will redirect you to GitHub, where you should “Authorize Render” to all repositories. This will allow Render to automatically redeploy your site every time you commit and push to the selected repo.
    • Back on the Render page, you should now be able to select your frontend GitHub repo. Only modify the following fields:
      • Feel free to change the name field to be the name of your project. This will be your final deployed frontend URL.
      • The build command should be set to yarn; yarn build.
      • Set your publish directory to be dist.
    • Deploy your frontend!
    • Click into your project on your dashboard. On the left sidebar, under “Manage”, navigate to “Redirects/Rewrites”. Add a new rule with the following fields:
      • Source Path = /*
      • Destination Path = /index.html
      • Action = Rewrite.
    • Official documentation can be found here: https://render.com/docs/deploy-vue-js .

  3. Deploy your backend as a Web Service. Return to your dashboard and hit the +New button, but this time select Web Service.

    • We have updated the concept_backend repo (GitHub link here) that you originally forked to include the required DockerFile for your backend deployment. Please sync your Github fork so that your backend repo is updated with the DockerFile in the correct place. For reference, this file should be in your backend repo root directory.

    To sync your repo with the new backend repo, do the following steps:

    1. Check your current remotes by running git remote -v in your backend. You should see
     origin  https://github.com/<your-username>/<your_backend>.git (fetch)
 origin  https://github.com/<your-username>/<your_backend>.git (push)
    • If you see any existing upstream repos, do git remote remove upstream. You should see only your origin now.
    1. Add the original repo as upstream
    git remote add upstream https://github.com/61040-fa25/concept_backend.git
    • Then confirm with git remote -v
     origin  https://github.com/<your-username>/<your_backend>.git (fetch)
 origin  https://github.com/<your-username>/<your_backend>.git (push)
 upstream  https://github.com/61040-fa25/concept_backend.git (fetch)
 upstream  https://github.com/61040-fa25/concept_backend.git (push)
    1. Now run the following:
    git checkout main
git fetch upstream
git rebase upstream/main
    • You must manually fix any merge conflicts that arise. After rebasing, git status will show that branches have diverged. Overwrites your repo’s history with the new rebased version
    git push origin main --force
    • Now your repo should be up to date with the course repo.

    You should have already authorized Render for GitHub from step 2, so you should be able to select your backend GitHub repo for the “Source Code” field under “Git Provider”.

    • We will be deploying your backend as a Docker image. Under “Language”, make sure the runtime environment is set to “Docker”.
    • Set your “Instance Type” to the Free tier.
    • Under “Environment Variables”, click “Add from .env” and upload your .env file from your backend.
    • Deploy your backend!
    • Official documentation can be found here: https://render.com/docs/docker#building-from-a-dockerfile . However, these instructions are not necessary as the Dockerfile we provide will satisfy all defaults.
  4. Hook up your frontend to your backend. Up until now, we have been running our frontend and backend locally in development mode. When we initialize an axios API instance, we specify a baseURL that indicates where the development server is. In dev mode, Vite will, by default, direct any /api requests to the API URL (e.g.,localhost:8000) specified in your vite.config.js file. To hook up your frontend to your newly deployed backend, you should set this baseURL to your newly deployed backend URL. Below is the best practice approach that we highly encourage you to use:
    • In your code, you should bind the API URL to an environment variable called VITE_API_BASE_URL. This will be accessed only in your deployed site on Render, so we will set this variable in your Render project. We do not need to set this value locally, since locally we want to use the development server at localhost. When you call your API, you should use this stored value:
      • const API_BASE = import.meta.env.VITE_API_BASE_URL || '/api';
      • This will set API_BASE to be the VITE_API_BASE_URL when on the deployed Render site, but default to localhost locally.
    • Commit and push your changes to your frontend repo.
    • Navigate back to the Render page for your frontend project. On the left sidebar, under “Manage”, click into “Environment.” Create a new environment variable with key = VITE_API_BASE_URL and value as your deployed backend URL + /api.
      • For example, https://my-backend.onrender.com/api
  5. Congratulations! You have now deployed your app. Your subsequent code pushes to your frontend or backend should automatically trigger a new deploy on Render. You can also manually deploy your sites by navigating into your Render project page and clicking the Manual Deploy button on the top right.