/FoodFindServer

Backend for Food Finder App

Primary LanguageJavaScript

ExpressReactBase

Express backend API with a React frontend boilerplate for my projects. Maybe it will be useful to you too :)

Table of Contents

Why is this a thing?

This is a project meant to have boilerplate code to:
  • Allow for anyone to pick up a ready to use Express API with React Front End codebase and get moving on their project
  • Have several examples for users new to Express and/or React to get them quickly going

What is this?

This app was built by using:
  1. Express-generator to first create an express app
  2. Creating a /client folder and running create-react-app
  3. I then modified server.js to demonstrate an API route while ready to serve a react frontend in production

I followed the below tutorial that is linked from the create-react-app github:
https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

Cool. How do I use this?

  1. If you are completely new to everying, make sure to download node.js first at nodejs.org. This will give you both node and npm. Once installed, open up terminal or cmd.exe (for windows) and type:

    node --version
        

    If installed properly you should see the version output back to you

  2. Next you want to download or clone this project. Place it anywhere and make sure to navigate to it in the terminal or command line. For example, if you downloaded the project to C:\Documents\GitHub\ExpressReactBase. Then you need to type:

      C:
      cd Documents/GitHub/ExpressReactBase
        
  3. In order to run this app you should use npm install in both the root and /client directories in order to download the express server and react app dependencies respectively.

    Root install

      npm install
      

    Navigate to client and install

      cd client
      npm install
      
  4. Once this done you want to go back to root and start the app

      cd ..
      npm start
      
  5. Viola! You should see the basic create-react-app webpage. If you enter in http://localhost:3000/api/getdata you should get json back.

How does it work?

Honestly, this is best explained in the original tutorial under the section "The Rub":

https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/

In development, npm start will concurrently run two servers on two different ports. The express api server will run on 1337, while the react server will run on 3000. The package.json in /client lists localhost:1337 as its proxy, so you don't have to specify localhost:1337/api/getdata to get data in your localhost:3000 reat app, but just use /api/getdata in your code and it should work.

In production, you will want your server to use npm run server. This will run the express server which will serve your react app from /client/build. This means you must go into client and do npm run build

    cd client
    npm run build
  

The create-react-app uses webpack to bundle/compile what often looks like a big hairy react app with many components down to a few javascript files. These optimized, production ready files are put into /client/build.