I was recently following the Advanced React course by Wes Bos – great course by the way! However, I always go through a course and end up trying to make it my own in the process. This course focuses on developing and deploying into production a Next.js, Apollo Client, GraphQL Yoga, and Prisma project.

Prisma has its own Demo servers hosted on the Prisma Cloud. In the course, we connect to the Prisma Cloud servers and use Prisma Cloud as a database too, and the frontend and backend are deployed on both Heroku and Now.

I personally prefer to use MongoDB for my database, and fortunately Prisma offers a MongoDB connector. I also prefer to use Digital Ocean as my server host, and Netlify for my frontend. So having completed the course, I attempted to transfer to all of those. I ran into plenty of issues, many of which were not covered in the course.

One thing that struck me before I transferred everything is how the hell does this all fit together? Fortunately, with the help of Giorgio Delgado, I finally managed to get a working app into production and I now have a better idea of how it all pieces together! Have a look at the image below.How the stack fits togetherIf you have followed the same course by Wes Bos, you might want to do something similar to the above. You might have similar requirements. MongoDB is very popular, and I’d imagine Digital Ocean is too. Here’s a few of the gotcha’s that took me a while to figure out. I hosted my backend on a Digital Ocean droplet. Setting up Digital Ocean’s Node.js Quickstart, you need to consider a few things:

  1. How to set up your nginx server configuration file
  2. Setting up Docker
  3. You don’t need two Docker images. It’s simply one to host the GraphQL Server on a port of your choice
  4. There is a Prisma endpoint, but it isn’t the endpoint that the frontend needs to interface with
  5. Include headers for CORS

How to set up your nginx server configuration file

Follow these instructions on Digital Ocean’s website about how to set up your droplet so that you’ve got a working server hosted at an IP address. Then, follow this tutorial and skip to the section on setting up server blocks. Remember that your nginx config file, which will be named your domain name after follow the instructions, has a proxy_pass for your GraphQL Server Port, so any requests made can access it, like so:

server {
  index index.html index.htm;
  server_name kookreviews.com www.kookreviews.com;

  location / {
     proxy_pass http://localhost:4444/;
     try_files $uri $uri/ =404;
  }
}

Setting up Docker

Now you want to make sure that the GraphQL server is running. To do so, you need to have Docker && Docker Compose set up on your droplet too. Set Docker up here and Docker Compose here. Then, you can pull the Prisma docker from Docker Hub here.

Then you can run your docker-compose up -d command in your project root directory, then prisma deploy, and finally pm2 start npm -- start to start the GraphQL server.

Include headers for CORS for both Express && GraphQL Server

server.express.use(function(req, res, next) {
  res.header(
    "Access-Control-Allow-Origin",
    "https://your-frontend-url.com"
  );
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept"
  );
  next();
});

const opts = {
  cors: {
    credentials: true,
    origin: [process.env.FRONTEND_URL] // your frontend url.
  }
};

server.start(opts, ({ port }) => {
  console.log(`server is now running on port ${port}`);
});

Wow, that was a lot! I know. Email me if you have any questions at sdktlr@gmail.com. Or if you want, you can have a look at the full backend setup here and the frontend here.