Deployment

Everything (GraphQl, Apollo, Next.js, Node.js, Firebase Functions) has been deployed into Firebase without the need to setup separate servers.

In this section we will discuss about how to deploy this template in Firebase. Just run the below command in your terminal in the root headless-graphql directory step by step and you are good to go,

NB: before you run the below command make sure you have installed firebase cli and login into the terminal using firebase login command, check this link for details https://firebase.google.com/docs/cli. Also make sure you have Node 8.x.x installed in your system otherwise it will not work (https://nodejs.org/dist/latest-v8.x/).

Firebase Deploy:

i)   yarn (if you are running it for the first time)
ii)  yarn web:build
iii) yarn server:build
iv)  yarn deploy

Here I will discuss little bit about the above command, how they are helping our template to be deployed in the firebase.

i) yarn:

As we all know by now headless-graphql is built on top of monorepo architecture using lerna (https://github.com/lerna/lerna) and yarn workspace. so if you just run yarn command in the root directory of this project it will install all the required packages and libraries in your project.

ii) yarn web:build:

we know, In the frontend of this application we are using Next.js (https://nextjs.org). So basically what this command do is, prepare the frontend for the production using yarn build command in the packages/web directory. if this command run successfully you will see a .next folder created in the packages/web directory.

iii) yarn server:build:

This is another important command to deploy our app in the firebase. Basically this command complete two task,

• first, it will build our api directory for the production mode which is available in the packages/server and move it to the packages/cloud directory.

• then, it will copy the build .next folder from the packages/web directory to the packages/cloud directory and paste it as next folder.

the above task is important for our firebase deployment, as we are deploying both the graphql api and next js in the firebase. and to do this we need to tell firebase that deploy both our graphql and next js as firebase functions. you can see exactly what we have done this into packages/server/index.js file.

iv) yarn deploy:

finally, yarn deploy command will deploy the cloud directory into the firebase.

After, successful deployment you will get the related url in your terminal, firebase deployment take some time to deploy, the terminal will look something like below

NB: after deployment if you start the development again you may run into an error in your terminal which basically says you have multiple package.json file with same name inside packages/server and packages/cloud directory.

the reason of this issue is, there are two package.json file inside server directory and cloud directory with same name inside the package.json file, so the solution should be change the name inside the package.json file of the cloud directory. you can give it cloud or whatever you want but server name already exist on server/package.json file. as we are converting es6 code into cloud directory so most of the files get copied. you won't have issues with other files just this one.

Debugging:

if you got any error after deploying you need to check the Firebase -> Your project -> Functions -> Logs. you will find necessary information about your error here.