Prisma + GraphQL. Project Setup Pt1
Tags: prisma, graphql, apollo, react
Published: 2020-01-15 21:58:43

So, I started to work on my personal portfolio as an aspiring Junior Frontend developer before I switched my career to Security Analyst :D

At my previous job we were building an internal testing tool (top secret stuff), and the stack we used was pretty trendy on the frontend side, it was React with Typescript and other friends.

So, I wanted to develop my skillset further, and on top of that learn a bit of backend, while building a personal project for my portfolio.

I would probably do something with NodeJS, Express, MongoDB and React-Typescript, since I actually wasn’t sure about the backend, and at the same time I didn’t want to go that deep into it rather just having fun while building my precious UI.

But then my colleague told me to look into Prisma and GraphQL… and I was sold!

GraphQL is sexy. See why ["GraphQL is the better REST"](https://www.howtographql.com/basics/1-graphql-is-the-better-rest/)


## The Stack

### Backend

- [Prisma v 1.34](https://www.prisma.io/docs/understand-prisma/prisma-introduction-what-why-how-j9ff/) — an open source library, that sort of sits on top of your database and provides a full-featured GraphQL API that you can use to interact with the database.
- [Apollo Server v2](https://www.apollographql.com/docs/apollo-server/) — implements a GraphQL server and can be queried from ApolloClient.
- [Node.js v8.9.4 or later](https://nodejs.org/en/)
- PostgreSQL

### Frontend

- [React v16.8](https://create-react-app.dev/docs/getting-started/) — in particular Create-React-App will serve as a great template for starters.
- [ApolloClient v2.6](https://www.apollographql.com/docs/react/) — will be responsible for requesting and caching your data, as well as updating your UI

## Initial Setup

While I was deciding on how to approach the backend, I had already cloned *create-react-app* and installed nodejs. Fairly easy, so I won’t focus on it here.

However, for beginners, I think it is worth mentioning the folder structure.

So, inside *my-app* folder, you will have two other folders: *backend* and *frontend*. Each of them has their respective <code>package.json</code> files, which have their scripts to start the server-side with node and the frontend.

![backend folder structure](https://miro.medium.com/max/534/1*KWT45XfD8Ydkg6nMFIlTWw.png)


## Prisma Setup

### Install the Prisma CLI

```
npm install -g prisma
```

Set up Prisma using Docker, in order to use Prisma locally. For this, you will create a Docker Compose file that configures Prisma and specifies the database it can connect to, in my case its a brand new Postgres db.

```
touch docker-compose.yml
```

Paste the contents of the file below into your docker-compose.yml file.

{% gist https://gist.github.com/dumpofmemory/2648c14add26bf2ba755854cd4820bde file=docker-compose.yml %}

To launch Prisma and the connected database:

```
docker-compose up -d
```

And now Prisma is connected to your local database and runs on <code>http://localhost:4466</code>, which was specified in the configuration file above.

You might want to access Prisma admin panel <code>http://localhost:4466/_admin</code> to gain more detailed view of the responses when querying your database. You can also delete records from your database there.

To find out how you can secure your Prisma server, see [this](https://www.prisma.io/docs/prisma-server/authentication-and-security-kke4/)


## Configure your Prisma API

To bootstrap the configuration files for your Prisma client run the following command, where <code>endpoint</code> needs to match the URL of a running Prisma server.
```
prisma init --endpoint http://localhost:4466
```

This will create the minimal setup required to deploy the Prisma datamodel: <code>prisma.yml</code> and <code>datamodel.prisma</code>. And it will allow you to finally deploy the Prisma API.

Few things before deploying.

Add the following lines to the end of your <code>prisma.yml</code>:
```
generate:
  - generator: graphql-schema
  output: ./generated/prisma.graphql
```

This will generate our GraphQL schema which we will be referring to when building *queries* and *mutations*.

Now let’s deploy using the following command.
```
prisma deploy
```

At this point you can consider your Prisma set up done. 🎉🎉🎉

In the next part, I will set up both Apollo Client and Server, as well as write my first queries and mutations.