Deploy React app to Render

I set up React on Render for free

Deploy React app to Render

TLDR:

Create Static Site -> Connect to Github/Gitlab repo -> Done

Overview: The only part that matters

Cost:

Free (yay) + No credit card (double yay)

Difficulty: Non-existent

Compared to my previous Wagtail (Django, Docker) deployment, this one is really simple to deploy.

Create React App

In this tutorial, I use the most barebone form of createreactapp, so basic there is no need for project repo or demo.

Installation: Node + Visual Studio Code

1. Install Node + VS Code

Node for React and (optional) Visual Studio Code as code editor.

Note: Run VS Code as administrator

Installation: React

2. Install React and create React app

Create and open folder, then start terminal.

Run:

npm i react

npx create-react-app frontend

Gitlab: Create project

3. Create Gitlab project

Installation: Git

4. Install Git

Note: In the dropdown, change to ‘Use VS Code as Git’s default editor’

5. Push code to Gitlab

git init

git config — global user.name “username”

git config — global user.email username@mail.com

git remote add origin https://gitlab.com/.....git

git add .

git commit -m “initial commit”

git push — set-upstream origin master

Git commands I used

6. Deploy React app to Render

• Create new static site

• Connect to Gitlab repo

• Configure settings

Note: Make sure the root directory is correct

… then you wait …

Done.

Your site is live

Simple, isn’t it?

Deploy succeeded

You can refer to the full video tutorial if you prefer.

Walkthrough:

With this, I hereby declare my full independence from Heroku.

All hail to Render.