Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)
Tags: beginners, vue, javascript
Published: 2022-01-13 20:21:48

## Project Debriefing

A picture is worth a thousand words. Here's what we're going to build today. 

[Astronomy of the Day Gallery](https://nasa-demo-devto.onrender.com/
)

In [Part 1](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-1-of-3-132a), we learned how to set up our development environment, and in [Part 2](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-2-of-3-27g5), we learned how to customize the template for the Nasa Demo application. In this article, we will be going over the steps on how to deploy the application to the internet so your friends can see it too! 

**_Bonus_**: Render hosting for the static site is free with less than 400 build hours per month. :smile:

### _Table of Contents_
1. [Register with Render Hosting Services](#register) 
2. [Deploy Application to Render](#deploy)

---

## <a name="register"></a> Register with Render Hosting Services

### 1. _Sign up with Render_

Go to [onrender](https://dashboard.render.com/register) to register a new account with Render. 
![Onrender Signup Screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j5dfx30y64rd69za60ln.png)
 
For this tutorial, I simply used my Github account to register with Render. 

## <a name="deploy"></a> Deploy Application to Render

### 1. _Sign in to Render_

Come back to [Render](https://dashboard.render.com) with your account, and you should see the dashboard. 

### 2. _Provide Github Repo_
Click on the "New +" button on the top navigation bar and click on "Static Site" to create a new site.
![Render.com Screen with New Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a33qyhznk9aot4jpxzb.png)
 
You should see a field for your GitHub repository that contains the latest version of the Application. Copy the URL for the Github repository and paste it into this field in onrender.
![Render.com Screen for Github Repo URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gzjf3qy2ucv3gic03yvj.png)
 
### 3. _Set Up Render Workflow_

Enter the following:
* Name: `nasa-demo-devto`
* Branch: `gallery` 
* Build Command: `yarn build`
* Publish directory: `dist`

Open up the Advanced toggle to add environment variable.
* Name: `VUE_APP_API_KEY`
* Value: `<insert_NASA_API_key_here>`

See [Part 1](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-1-of-3-132a) to find out how to get the NASA API key.

![Set Up Form for Render Workflow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vr79vqnmsysn5mi84sku.png)

Finally click on "Create Static Site" button at the end of the form!
![Create Static Site Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhwoanwdc419axoaqlgc.png)
  
### 4. _Go to Your Live Site!_

The build should be successful.
![Build Script Terminal - Your Site Is Live](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsn3kyn8ekqf43vqhwss.png)
 
Your live site should look something like this one [here](https://nasa-demo-devto.onrender.com/). :smile:

---
## Article Series

[Build A Simple Vue 3 App and Enjoy Astronomy! (Part 1 of 3)](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-1-of-3-132a)
[Build A Simple Vue 3 App and Enjoy Astronomy! (Part 2 of 3)](https://dev.to/stoicllama/build-a-simple-vue-3-app-and-enjoy-astronomy-part-2-of-3-27g5)
Build A Simple Vue 3 App and Enjoy Astronomy! (Part 3 of 3)