NYC Restaurant Info™

Tracking Outdoor Dining Statuses during Covid-19

Have you found it difficult to see if your favorite nyc restaurants are open? You're not alone. In the wake of Covid-19, restaurant statuses are changing daily. Statuses on widely-reputable platforms are all showing outdated information.

In mid-August of 2020, we discovered a new API on NYC Open Data that allows us to see near-real-time inspections of restaurants in all 5 boroughs.

We have created an application to browse restaurants in your area to see their current inspection status, seating configurations, and if they are open for outdoor dining. You can also search for a specific restaurant to get the most-recent information available.

Local Development

This app has the skeloton of a MERN app and is configured to proxy backend requests to a local Node server, but we are currently only using the front end for cost-saving purposes. The following steps assume the website is static and may be updated in the future.

Spin the React UI

# change into the react directory
cd react-ui/

# initial setup
npm install

# start the server
npm start

That's it!

Optional Commands

Install new npm packages for Node

npm install package-name --save

Install new npm packages for React UI

# navigate into the react directory
cd react-ui/

npm install package-name --save

---

This project is forked and detached from https://github.com/mars/heroku-cra-node

create-react-app with a Node server on Heroku

A minimal example of using a Node backend (server for API, proxy, & routing) with a React frontend.

• 📐 Design Points
• 🕺 Demo
• 🚀 Deploy to Heroku
• ⤵️ Switching from create-react-app-buildpack
• 🎛 Runtime Config

To deploy a frontend-only React app, use the static-site optimized
▶️ create-react-app-buildpack

Design Points

A combo of two npm projects, the backend server and the frontend UI. So there are two package.json configs and thereforce two places to run npm commands:

1. Node server: ./package.json
   • deployed automatically via heroku/nodejs buildpack
2. React UI: react-ui/package.json
   • generated by create-react-app
   • deployed via build script in the Node server's ./package.json
   • module cache configured by cacheDirectories

Includes a minimal Node Cluster implementation to parallelize the single-threaded Node process across the available CPU cores.

Demo

Demo deployment: example API call from the React UI is fetched with a relative URL that is served by an Express handler in the Node server.

Deploy to Heroku

git clone https://github.com/mars/heroku-cra-node.git
cd heroku-cra-node/
heroku create
git push heroku master

This deployment will automatically:

• detect Node buildpack
• build the app with
  • npm install for the Node server
  • npm run build for create-react-app
• launch the web process with npm start
  • serves ../react-ui/build/ as static files
  • customize by adding API, proxy, or route handlers/redirectors

⚠️ Using npm 5’s new package-lock.json? We resolved a compatibility issue. See PR for more details.

👓 More about deploying to Heroku.

Switching from create-react-app-buildpack

If an app was previously deployed with create-react-app-buildpack, then a few steps are required to migrate the app to this architecture:

1. Remove create-react-app-buildpack from the app; heroku/nodejs buildpack will be automatically activated

   heroku buildpacks:clear

2. Move the root React app files (including dotfiles) into a react-ui/ subdirectory

   mkdir react-ui
   git mv -k [!react-ui]* react-ui/
   mv node_modules react-ui/
   
   # If you see "fatal: Not a git repository", then fix that error
   mv react-ui/.git ./

   ⚠️ Some folks have reported problems with these commands. Using the bash shell will probably allow them to work. Sorry if they do not work for you, know that the point is to move everything in the repo into the react-ui/ subdirectory. Except for .git/ which should remain at the root level. 

3. Create a root package.json, server/, & .gitignore modeled after the code in this repo

4. Commit and deploy ♻️

   git add -A
   git commit -m 'Migrate from create-react-app-buildpack to Node server'
   git push heroku master

5. If the app uses Runtime configuration, then follow Runtime config below to keep it working.

Runtime Config

create-react-app itself supports configuration with environment variables. These compile-time variables are embedded in the bundle during the build process, and may go stale when the app slug is promoted through a pipeline or otherwise changed without a rebuild. See create-react-app-buildpack's docs for further elaboration of compile-time vs runtime variables.

create-react-app-buildpack's runtime config makes it possible to dynamically change variables, no rebuild required. That runtime config technique may be applied to Node.js based apps such as this one.

1. Add the inner buildpack to your app, so that the heroku/nodejs buildpack is last:

   heroku buildpacks:add -i 1 https://github.com/mars/create-react-app-inner-buildpack
   
   # Verify that create-react-app-inner-buildpack comes before nodejs
   heroku buildpacks

2. Set the bundle location for runtime config injection:

   heroku config:set JS_RUNTIME_TARGET_BUNDLE='/app/react-ui/build/static/js/*.js'

3. Now, build the app with this new setup:

   git commit --allow-empty -m 'Enable runtime config with create-react-app-inner-buildpack'
   git push heroku master