Deploying a "static site" to render.com is free.
Their docs have a Create React App
quick start guide for reference.
BUT
Storing application data that needs to persist across deploys will incur additional charges, specifically, Add an SSD disk to any service
, quoted at $0.25/ GB per month
When you set up your Render account, the Render platform creates a sub-domain:
https://
< your project name > .onrender.com/api
This repository is configured to make fetch requests to https://state-quarters-collector.onrender.com/api
instead of http://localhost:8088
(or whatever your current URL is).
Therefore, before you deploy you need to modify your application code to make all API requests to https://state-quarters-collector.onrender.com/api
instead of http://localhost:8088
(or whatever your current URL is).
cd ~/workspace
- Fork this repository to your account.
- Clone your new repository to your machine:
git clone {github connection string} capstone-deploy
cd capstone-deploy
- Copy all of your source code into the
src
sub-directory. - If you installed any 3rd party
npm
tools, make sure you install them all again for this repository.npm i --save foo bar baz whatever
-
Go to render.com and create a new account by connecting your Github account.
-
Once you are logged in, go to the Dashboard.
-
Create a new service.
-
Select the
react-deploy-render
repository from the list of your repositories that it shows next. -
Provide a name for your service. Should be the name of your project.
-
Choose
Node
for the Environment field. -
Keep
master
branch. -
Build command should be
npm install && npm run build
. -
Start command should be
npm start
. -
Click the Advanced button at the bottom, but above the Create Web Service button.
-
Click the Add Disk button. Adding a disk prevents zero downtime deploys. Create a disk to store application data that needs to persist across deploys. You can mount it on any absolute path and read and write to it using standard filesystem primitives.
-
In the name field, you can provide any descriptive label you want for this disk (e.g. database)
-
Mount path should be
/var/data
-
1 GB should be enough for small projects.
-
Scroll down and click the Create Web Service button.
Then the platform will pull your repository code, install its the npm
packages, build your project and make it live.
start
script runs production build and starts json-server. Static dist files will be served by json-server.start:dev
script concurrently runs "normal" create-react-app dev build and json-server on separate ports.json-server
dependency
- Adds custom route for database resources by appending
/api
to the start of all db routes - Looks at request url and assumes if it doesn't begin with
/api
to just return the React app