End to End React with Prisma 2
Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.
1. Create Next.js base
Objective: Use Next.js to run both our frontend and backend servers for our app.
To start off, let's initiate our npm project and then install the dependencies and dev dependencies needed for Next.js. These come straight from the Next.js guide for starting an application.
npm init -ynpm install --save next react react-domnpm install --save-dev @types/node @types/react typescript
Create the .gitignore file so that we don't accidentally commit any of the hundred of files that will end up in the node_modules
or .next
folder.
.gitignore
node_modules.next
Next, we need to create a default page so that the development server can start up.
pages/index.tsx
tsx
const Index = () => {return (<div><p>Index Page</p></div>)}export default Index
In order to easily start up our development server, let's add some npm scripts. Replace the following code with the scripts
block that is already in the package.json
file.
package.json
json
"scripts": {"dev": "next","build": "next build","start": "next start"},
Next, start it up with npm run dev
and make sure that you can go to the site http://localhost:3000
in your browser. You should see the text "Index Page" against a white background.