# Render

## Creating a Render account

{% hint style="info" %}
Create a GitHub account first if you haven't already done so. Instructions on how to create a GitHub account can be found on this page [github](https://info.techup.live/admin-instructions/tooling-and-software/github "mention").
{% endhint %}

### 1. Go to <https://dashboard.render.com> and click on GitHub. (<mark style="background-color:red;">DO NOT CREATE AN ACCOUNT VIA OTHER OPTIONS</mark>)

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FCNw71jb2O0Uj76MJ6FbT%2FScreenshot%202024-04-22%20at%204.47.00%E2%80%AFPM.png?alt=media&#x26;token=39e06ab5-8cea-4fb2-acbc-c1b0db664952" alt=""><figcaption><p>Click on GitHub (Do not click on other options)</p></figcaption></figure>

### 2. Authorise Render

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FeZ8HpmGWKFOJLZzYHIZy%2FScreenshot%202024-04-22%20at%204.57.16%E2%80%AFPM.png?alt=media&#x26;token=1eee3003-ffd4-4175-b8e6-20176c544756" alt=""><figcaption><p>You will be redirected to GitHub, click on Authorise Render</p></figcaption></figure>

### 3. Enter your email address and click Create Account

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FLrQp80TiSNrU6wVETrOS%2FScreenshot%202024-04-22%20at%204.57.51%E2%80%AFPM.png?alt=media&#x26;token=0b49edc5-eceb-4c37-b06d-948eda42e1f7" alt=""><figcaption><p>Enter your email then click Create Account</p></figcaption></figure>

### 4. Verify your email but clicking the link sent to your email address

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2Fah1eHtCOq47aOYRTC4Pf%2FScreenshot%202024-04-22%20at%204.58.16%E2%80%AFPM.png?alt=media&#x26;token=febbdfbe-ba37-4f6f-a1ac-51a832199cac" alt=""><figcaption><p>You will be directed to this page, go to your email to retrieve the verification link</p></figcaption></figure>

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FMN1XrbHBeeVgY6PA9Czy%2FScreenshot%202024-04-22%20at%204.58.27%E2%80%AFPM.png?alt=media&#x26;token=22ca7458-3d02-4089-81e0-aaa030b36085" alt=""><figcaption><p>Click on the link in your email to verify your email</p></figcaption></figure>

### 5. Fill up the form and click on Continue to Render

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FbUHwnqMlylORM1wS1Clt%2FScreenshot%202024-04-22%20at%204.59.07%E2%80%AFPM.png?alt=media&#x26;token=0fa85db2-ab16-4d3a-95c3-e68f85de0585" alt=""><figcaption><p>You will be redirected to this page after clicking the verification link. Fill up the form and click on Continue to Render</p></figcaption></figure>

### 6. Congrats! You now have a Render account created!

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FR0oAoasmnqCyqtqvvlVC%2FScreenshot%202024-04-22%20at%204.59.13%E2%80%AFPM.png?alt=media&#x26;token=a313c5d7-4da3-4b39-9806-4db679367c7d" alt=""><figcaption><p>🎉 You now have a Render account!</p></figcaption></figure>

## Deploying my Website (without a Backend)

### 1. Open Render Dashboard (<https://dashboard.render.com>) and click on New Static Site.

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FnQhGUbznzJSPpOmZ0hQt%2FScreenshot%202024-05-02%20at%201.44.44%E2%80%AFPM.png?alt=media&#x26;token=625dd69e-3993-4c94-bc52-7010c3f874c4" alt=""><figcaption><p>Click on New Static Site</p></figcaption></figure>

### 2. Connect to your repository

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FrG8imJQEJaMeUsElg024%2FScreenshot%202024-05-02%20at%201.46.49%E2%80%AFPM.png?alt=media&#x26;token=7297b5b3-63bd-4aed-a918-651e8f0f0422" alt=""><figcaption><p>Click on Connect</p></figcaption></figure>

### 3. Set the publish directory to "." and click Create Static Site

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FTFeX3gBmzPJDxDBWExex%2FScreenshot%202024-05-02%20at%201.50.46%E2%80%AFPM.png?alt=media&#x26;token=8ef45ac6-698e-44d6-93eb-98221f6ce3de" alt=""><figcaption><p>Set publish directory to "." and click Create Static Site</p></figcaption></figure>

### 4. Congrats, your website should now start building and successfully deployed!

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FZcCC2HRufGwMNKMn8sUY%2FScreenshot%202024-05-02%20at%201.54.12%E2%80%AFPM.png?alt=media&#x26;token=4c2fc00d-b006-4b02-b561-31bedff7b358" alt=""><figcaption><p>You website is now deployed!</p></figcaption></figure>

## (Optional) Deploying my Web App with a NodeJS Backend

### 1. Open Render Dashboard (<https://dashboard.render.com>) and click on New Web Service.

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2Fy2SNAy25EqGf6jBJi7si%2FScreenshot%202024-05-02%20at%203.58.24%E2%80%AFPM.png?alt=media&#x26;token=6f315f7b-ea3e-4d9b-9870-005fea774e97" alt=""><figcaption><p>Click on New Web Service</p></figcaption></figure>

### 2. Select Build and deploy from a Git repository then click Next

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2Fof3F5I0GvaMg3OZXpD8g%2FScreenshot%202024-05-02%20at%203.59.17%E2%80%AFPM.png?alt=media&#x26;token=32fa5eca-3ca1-4dd7-8776-75acf4bd497d" alt=""><figcaption><p>Click next once you have selected the Git repository option</p></figcaption></figure>

### 3. Connect to your GitHub Repository

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FwEHtzNgMffTfGaKaWfUR%2FScreenshot%202024-05-02%20at%204.01.11%E2%80%AFPM.png?alt=media&#x26;token=1b6648a3-24a1-49a2-8b33-5d486bb1d343" alt=""><figcaption><p>Select the repository for your NodeJS application and click connect</p></figcaption></figure>

### 4. Enter the Build and Start Command for your application (the screenshot assumes your routing filename is server.js)

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FRUSu8Deu3n49SHyrdGy5%2FScreenshot%202024-05-02%20at%204.02.37%E2%80%AFPM.png?alt=media&#x26;token=c8beaff3-ea18-4c2d-910e-f74ff65ea088" alt=""><figcaption><p>Enter the build command of "npm install" and start command of "node server.js" or "node app.js" if your filename is app.js</p></figcaption></figure>

### 5. Change the Instance Type to Free then click Create Web Service

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FJzRhfjxM4Z2HorbmHDTp%2FScreenshot%202024-05-02%20at%204.05.49%E2%80%AFPM.png?alt=media&#x26;token=d1becfb0-9e96-44f4-8c6d-dd373e651b05" alt=""><figcaption><p>Select the Free tier then click on Create Web Service</p></figcaption></figure>

### 6. Your application is now successfully deployed!

<figure><img src="https://4000871720-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3JeKot5J5CqiKNQnsgZV%2Fuploads%2FVhRdKSDcW17lSdMgNKK8%2FScreenshot%202024-05-02%20at%204.21.53%E2%80%AFPM.png?alt=media&#x26;token=9255bdbc-fccc-4790-bbdc-b3b7a0c9fdaf" alt=""><figcaption><p>Success!</p></figcaption></figure>

{% hint style="info" %}
Refer to [sample-web-app](https://info.techup.live/programme-essentials/sample-web-app "mention") if you are looking for instructions on how to deploy a Postgres Database on Render.
{% endhint %}
