First fullstack web project with Express, React. Powered by TypeScript

https://book.juseong.me

• Architecture
  • Frontend
  • Backend
• Getting stared
• Build
• Test
  • Frontend
  • Backend
• Run

This is the directory structure for frontend, it is created by create-react-app with --template typescript flag, which helps us to create react project.

client
├── build
├── public
├── src
│   ├── constants.ts
│   ├── index.tsx
│   ├── types.ts
│   └── state
├── package.json
└── tsconfig.json

backend directory structure is as follows, and the necessary information is contained in each folder.

server
├── build
├── logs
├── src
│   ├── app.ts
│   ├── index.ts
│   ├── types.ts
│   ├── models
│   ├── routes
│   └── utils
├── tests
├── jest.config.js
├── package.json
└── tsconfig.json

Before getting started, you need .env file at server/build/src/ following the .env.template file located in server directory.

bash ./build.sh

After build project, you have to place .env file in right position. Feel free to open a new issue if you're having any problems.

Frontend test uses a cypress to check the front page action. You need a local server is required to proceed with the test. Therefore, the local server should be run before run the test.

npm run cypress:run

npm run cypress:open

Backend server test uses a jest to check the backend server API.

npm run test

bash ./run.sh

npm run start:prod

• Create user info page
• Create genre list page
• Update list page
• Server Side Rendering