dhythm / rsc-with-prisma

React Server Components with Prisma

Setting Environment

Install core libraries

node doesn't have --conditions option now, so use JavaScript instead of TypeScript. The app with latest react@experimental and etc will be crashed for webpack, thus use fixed experimental version here.

npm install react@0.0.0-experimental-0cc724c77-20211125 react-dom@0.0.0-experimental-0cc724c77-20211125 react-server-dom-webpack@0.0.0-experimental-0cc724c77-20211125 react-fetch@0.0.0-experimental-0cc724c77-20211125

touch webpack.config.js

Install linter and formatter

npm init @eslint/config

✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · YAML
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-react@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0
✔ Would you like to install them now? · Yes
✔ Which package manager do you want to use? · npm

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

npm install --save-dev eslint-config-prettier
npm install --save-dev eslint-plugin-import eslint-plugin-unused-imports

Install others

npm install react-error-boundary --force
npm install --save-dev rimraf
npm install --save-dev concurrently

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
touch .babelrc

Create client-side

Add files that composes for react.

mkdir public
touch public/index.html
touch public/style.css

mkdir src
touch src/index.client.jsx
touch src/App.client.jsx
touch src/Root.client.jsx
touch src/LocationContext.client.jsx

Create more client-side components.

Create server-side

npm install express compression
npm install --save-dev @babel/register

mkdir server
touch server/api.server.js
touch server/package.json

touch src/App.server.jsx

Create more server-side components.

Create DB

npm install react-prisma --force
npm install --save-dev prisma
npx prisma init --datasource-provider postgresql
prisma generate

touch prisma/seed.js
touch docker-compose.yml

Update .env, and run

npm run db:init

Create a component for connecting DB.

touch db.server.js

Getting Started

npm install --force
prisma generate
npm run db:init
npm run start