A bare-bones monorepo starter for running express.js
and create-react-app
apps built with Typescript
. Runs frontend and backend from a single heroku app out of the box.
- Fork or download this repository
- Run
yarn
from the root directory - You're ready to run any of the scripts listed below
- Profit!
I added some dev dependencies to make these scripts cross-platform.
Script | Description |
---|---|
bs | Run build then start . Shortcut for testing build locally |
build | Clean build of client and server. Works on heroku by default |
build:client | Build client app |
build:server | Build server app |
clean | Cleans the /build directory |
copy:client | Copies the built client to /build |
dev | Runs client and server dev commands in parallel |
dev:client | Runs dev command for client app |
dev:server | Runs dev command for server app |
start | Starts the compiled server app from the /build directory. Runs app on heroku by default |
test:client | Runs client tests in watch mode |
test:server | Runs server tests in watch mode |
You'll need a heroku account and the heroku CLI. You'll also need a git repository for deploying via git. You can run git init
in the root directory if you don't already have git set up for the app.
- From the root directory run
heroku create <app name>
(See docs)
This should create the new app on your heroku account and add a newheroku
git remote. You can verify withgit remote -v
- Run
git push heroku master
to deploy your combined app
Heroku will detect the node.js environment and will by default runbuild
and thenstart
so you're ready to go.
The client is mostly the default create-react-app
yarn create react-app client --template Typescript
- Added
"proxy": "http://localhost:5000"
topackage.json
This allows the client to reach the server via/
in development mode - Updated
App.tsx
to include code to load the/movies
API data
This is pretty much the exact output of this tutorial by Amenallah Hsoumi which I found via this StackOverflow question. The only changes I made are:
- Set
"outDir": "../build",
intsconfig.json
This writes the server files directly to our desired build directory instead of having to copy them there later - Added a default "record" in the
MovieApi.ts
file
This just gives the client app something to show by default
This post by Dirk Hoekstra served as validation for my idea. The end result is similar but I wanted to use yarn workspaces.