https://github.com/alperg/mern-food-lookup
Food Lookup Demo App with MERN stack
https://github.com/alperg/mern-food-lookup
Last synced: 3 months ago
JSON representation
Food Lookup Demo App with MERN stack
- Host: GitHub
- URL: https://github.com/alperg/mern-food-lookup
- Owner: alperg
- License: mit
- Created: 2019-11-08T17:00:24.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-05-09T19:25:33.000Z (about 5 years ago)
- Last Synced: 2024-12-28T20:29:16.002Z (5 months ago)
- Language: JavaScript
- Homepage: https://mern-food-lookup.herokuapp.com/
- Size: 2.52 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# mern-food-lookup
This is a food nutrition lookup application that demonstrates the setup generated by `create-react-app` alongside a Node Express API server with MongoDB & Mongoose. The data driving the app is supplied by the USDA's National Nutrient Database. App uses Functional components with hooks.
## Features
This app demonstrates the following:
- React, Hooks, Semantic UI, Node, Express, MongoDB, Mongoose
- Importing csv data to json
- Feeding MongoDB with bulk json data
- Proxying the client-side requests to back-end for local development
- Wildcard search with Mongoose (similar to `select * from table where field like '%searchterm%'`)
## Running locally
```
git clone https://github.com/alperg/mern-food-lookup
cd mern-food-lookup
npm i
cd client
npm i
cd ..
npm start
```
To seed your db, browse `http://localhost:3001/api/food/seed`.
## Overview
`create-react-app` configures a Webpack development server to run on `localhost:3000`. This development server will bundle all static assets located under `client/src/`. All requests to `localhost:3000` will serve `client/index.html` which will include Webpack's `bundle.js`.
To prevent any issues with CORS, the user's browser will communicate exclusively with the Webpack development server.
Inside `Client.js`, we use Fetch to make a request to the API:
```js
// Inside Api.js
return fetch(`/api/food?q=${query}`, {
// ...
})
```
This request is made to `localhost:3000`, the Webpack dev server. Webpack will infer that this request is actually intended for our API server. We specify in `package.json` that we would like Webpack to proxy API requests to `localhost:3001`:
```js
// Inside client/package.json
"proxy": "http://localhost:3001/",
```
This handy features is provided for us by `create-react-app`.
Therefore, the user's browser makes a request to Webpack at `localhost:3000` which then proxies the request to our API server at `localhost:3001`:
This setup provides two advantages:
1. If the user's browser tried to request `localhost:3001` directly, we'd run into issues with CORS.
2. The API URL in development matches that in production. You don't have to do something like this:
```js
// Example API base URL determination in Client.js
const apiBaseUrl = process.env.NODE_ENV === 'development' ? 'localhost:3001' : '/'
```
This setup uses [concurrently](https://github.com/kimmobrunfeldt/concurrently) for process management. Executing `npm start` instructs `concurrently` to boot both the Webpack dev server and the API server.
## Deploying
### Background
The app is ready to be deployed to Heroku.
Inside `server.js`, we tell Node/Express we'd like it to serve static assets in production:
```
if (process.env.NODE_ENV === 'production') {
const path = require('path');
app.use('/static', express.static(path.join(__dirname, '../client/build/static')));
}
```
You just need to have Webpack produce a static bundle of the React app for Heroku to render your client app.
### Credits
Inspired by https://github.com/fullstackreact/food-lookup-demo