FERN Stack Starter

This project is meant to be a starting place for a Express server with a React client and a Firebase database. This project uses a Procfile for deployment to heroku, though heroku is 100% optional.

Getting Started

Run

npm install

in the root directory of the project.

This will install all the packages needed for the project to build iteself, including the depencies needed by ./server and ./client. NOTE: both of these folders have their own package.json and /node_modules, so keep that in mind when installing additional packages from the terminal.

After successfully installing all dependencies, run:

npm run build

in the root directory.

This should build the server and the client and a ./build folder will be generated in each subdirectory. For the Server, the build script is simply compiling the typescript to javascript, while Client utilizes create-react-app, which comes with webpack to bundle all the dependencies in ./client/src/ then builds out static assets. (The ./client/build folder is what you could copy and past into any public_html and serve up the index.html page inside)

Note: ./server has a tsconfig.json* which defines the input and output files, among other typescript options. Click here for more info about tsconfig.json and how to configure it, should you need to. *(./client does too, but create-react-app manages it)

After both subdirectories have a ./build folder, to run locally run:

npm start

in the root.

There are a number of scripts defined in the root package.json that would be worth reading over to save some time, particularly in development. Furthermore, each subdirectory's package.json has scripts defined, so you could work on each individually.

File Structure

Root

package.json: defines metadata of the project, scripts, and dependencies

server/: contains all server related files

client/: contains all client related files

node_modules/: dependencies for ROOT

_media/: assets for README.md, etc

Procfile: defines how the app should start on heroku, required for heroku

.env.sample: file to declare environment variables

Server

src/: file to declare environment variables

build/: file to declare environment variables

node_modules/: dependencies for server

package.json: defines metadata of server project, scripts, and dependencies

tsconfig.json: configuration file for the typescript compiler

Client

src/: file to declare environment variables

build/: file to declare environment variables

public/: index.html lives here, logos, etc

node_modules/: dependencies for client

package.json: defines metadata of the client project, scripts, and dependencies

tsconfig.json: configuration file for the typescript compiler