See this running on Heroku at https://plantapp.herokuapp.com/
- An Express app is the backend, serving the data api.
- A create-react-app is the web frontend. node-foreman is used to run them together. (As suggested in this post).
- The database is PostgreSQL with a pg-promise interface. The plant data comes as a
.csv
file from the USDA Plants Database.
$ git clone https://github.com/hillscottc/plantapp
$ cd plantapp
$ npm install
- Note: The client project is independent of the server project. So a
postinstall
script is added to runnpm install
on the client dir as well. Inpackage.json
, you see:"scripts": { "postinstall": "cd client && npm install"
$ npm start
This launches the Server and Client with foreman.
The services can also be run individually. For example to run just the server:
$ npm start:server
Or, with foreman:
$ nf start server=1
node-foreman provides several benefits. In this project, it is used primarily for two things:
-
Configure our client (React) service and server (Express) processes. This is done in the
Procfile
:web: npm run start:client server: npm run start:server
-
Configure environment variables read by at launch. This is done with a
.env
file:{ "node": { "env": "development" }, "mongo": { "url": "mongodb://localhost/plantsdb" }, "server": { "port": 3001 } }
Then these variables can be accessed from javascript like:
process.env.MONGO_URL
.