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!
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.
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.
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:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- Click on New Web Service on the Web Services widget, which should take you to a page that looks like this:
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 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.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 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.
Configuring our Web Service
- You should now see a page that looks like the one below.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 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).
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.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 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
Image Not Showing
Possible Reasons
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
Learn More →
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.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- You can view the deploy logs via the Render dashboard to see the errors that occurred during the deployment.
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.
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
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.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
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.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- For the
Want to modify these settings?
prompt, type in N
. Once you are done, you should see the following in your terminal.
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
- 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!
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!
TODO: Put your frontend Vercel URL in the assignment README.md