The GitHub repo for the workshop project is here.
First, if you want to ensure you’re using the correct Node.js and package manager versions, install Volta
# install Voltacurl https://get.volta.sh | bash# install Nodevolta install node
Then, check out a local copy of this repository
git clone firstname.lastname@example.org:mike-north/full-stack-tscd full-stack-typescript
Next, install the project dependencies
Build the project for the first time
And finally, start the project
After the client and server build processes complete, you should see an “imitation Twitter” running on http://localhost:1234.
There are three top level folders
/client- A React frontend
/server- A Node.js backend
/shared- Code that can be imported by both the frontend and backend
Each has its own
package.json, and we’re using yarn workspaces. This is a monorepo, but it’s very simple in terms of tooling and running things.
Some interesting things to study before we dig in
db.jsonfile (this is the data for our database)
Take a look at the entry points for both client and server
You can run the following, either within a sub-project (
shared) or at the
top level folder for the repo.
yarn dev“runs the thing”
yarn build“builds the thing”
yarn lint“lints the thing”
Give these a try.
Note that running
yarn dev in the
server component will also build and start the
client project. Effectively this means starting
server will start the “whole app”.
There’s one more command we’ll get into later, but doesn’t work (yet) in the starting point code
yarn codegen“runs all code generation stuff for the thing”
master branch of the course project,
clientruns on all hardcoded data that’s held in top-level module scope of various components. It is built with parcel
serverdoes not have any kind of API at all, but it has a working data store (built on lowdb) in
./db.tsthat you can use to get records of various kinds.
- You’ll be able to create new tweets
- Most of what you see on the screen will be driven by information in the database, and coming from the backend
- You’ll be able to like and un-like tweets
- We won’t mess with any CSS
- We won’t have to install any dependencies
- We won’t have to change the typescript config
- We won’t have to worry about how the backend interacts with the database
Once you’re ready, let’s jump in to the project!