Chapter 8: Deployment

Strongly Typed Next.js

link Deployment

By the end of this lesson, developers will be able to:

  • Create a monorepo for their project using yarn workspaces
  • Deploy their project to Heroku using the Heroku CLI

Introduction

So far, our project is using what's known as a BFF (Backend for Frontend) style of architecture. The app communicates with an api directly, and both are running separately.

In this chapter, we will introduce yarn workspaces to run both projects at the same time.

Afterwards, we will deploy the project to Heroku using the Heroku CLI.

link Installation

Visit the installation guide for your respective operating system. Once you are all set, be sure to test your local version with the following command:

yarn --version

Once you verify the local version appears, you may continue.

Workspaces

Workspaces make it possible to work on multiple, interdependent libraries at once. For more information on workspaces, visit the documentation.

Create a new file in your root directory, package.json and insert the following:

{
  "name": "stream-me",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "private": true,
  "scripts": {
    "build": "yarn workspace @stream-me/app run build",
    "start": "yarn workspace @stream-me/api run start",
    "dev": "yarn workspace @stream-me/api run dev"
  },
  "workspaces": [
    "api",
    "app"
  ],
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Our workspace references both api and app projects. We also include scripts to build and start each project, by referencing their namespaces.

Packages

Before creating the monorepo, we will need to rename both api and app projects in their respective package.json files:

Return to app/package.json and insert the following:

{
   "name": "@stream-me/app",
}

Return to api/package.json and insert the following:

{
   "name": "@stream-me/api",
}

At this point, we simply run yarn install in the root directory to install both projects' dependencies:

yarn install

After the installation completes, you may notice @stream-me in your node_modules directory, with some symbolic links to each project. Well done!

link App Updates

Build Command

Let's go ahead and add the graph-let command to our app project's package.json.

Visit the scripts section of the file named app/package.json, and insert the following:

  "scripts": {
    "dev": "next dev",
    "build": "npx graphql-let && next build",
    "start": "next start"
  },

We are adding npx graphql-let to the build command, so that with each build we are able to generate new GraphQL queries.

Apollo Client

Back in app/lib/apollo.ts, remove the absolute URL pointing to http://localhost:8000/graphl, and replace it with a relative URL: /graphql.

function createApolloClient() {

  {/* ... */}

  const httpLink = new HttpLink({
    uri: '/graphql',
    credentials: 'include',
  });

  {/* ... */}
}

Next Project

Create a new file in your app directory, app/index.ts and insert the following:

import next from 'next';

const nextApp = next({
  dev: process.env.NODE_ENV !== 'production',
  dir: __dirname,
});

export default nextApp;

We are exporting the entire Next.js application as a module, which will be served by the Express server.

link Next Custom Server

In order to serve the frontend app on the backend, we will prepare a Next.js custom server.

Make the following changes inside api/server/index.ts:

import nextApp from '@stream-me/app';

const handle = nextApp.getRequestHandler();

{/* ... */}

const corsOptions = {
  credentials: true,
};

{/* ... */}

apolloServer.applyMiddleware({ app, cors: corsOptions });

// create next app request handler
await nextApp.prepare();
app.get('*', (req, res) => handle(req, res));

In the above code snippet, we serve the frontend Next.js application with a custom route handler. At this point, we are ready to test the application using the following commands:

Heads Up! These commands should be ran in your project's root directory.

npm run dev
npm run build
npm run start

Revisit your project at http://localhost:8000/graphql and verify your queries are working. Be sure to visit your homepage at http://localhost:8000.

Git Ignore

Before moving forward, add the following to your root level .gitignore file:

node_modules
.DS_Store

link Heroku

Make sure you download the heroku cli and run heroku login

heroku create your-heroku-app-name
git status
git add .
git commit -m "update project"
git remote add heroku <your-heroku-remote-url>
git push heroku master

Having issues? Debug with the Heroku command heroku logs --tail to see what's happening on the Heroku server.

Test the endpoints!

https://your-heroku-app-name.herokuapp.com/graphql

You may notice everything breaks unless we add the missing environment variables: MONGO_URL. We will need to visit the new project's settings on https://heroku.com to add these missing environment variables.

Congratulations!

Today we built a monorepo using yarn workspaces and deployed the project to Heroku. Well done!

link References

format_list_bulleted
help_outline