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!
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!