How to use koa.js + next in firebase functions

I want to use firebase functions to deploy the react application for shopify app

I am new to both next and koa

based on this repo the below code is how to host a simple react application in firebase

    const path = require('path')
    const functions = require('firebase-functions')
    const next = require('next')
    
    var dev = process.env.NODE_ENV !== 'production'
    var app = next({
      dev,
      conf: { distDir: `${path.relative(process.cwd(), __dirname)}/next` }
    })
    var handle = app.getRequestHandler()
    
    exports.next = functions.https.onRequest((req, res) => {
      console.log('File: ' + req.originalUrl) // log the page.js file that is being requested
      return app.prepare().then(() => handle(req, res))
    })

Which works correctly, no issue.

Then based on this tutorial from shopify I need to integrate koa and other dependencies in server.js, which in my case I believe it should be placed inside the firebase function. so I get to this code

   const path = require('path')
   const isomorphicFetch = require('isomorphic-fetch');
   const Koa = require('koa');
   const functions = require('firebase-functions')
   const next = require('next');
   const ShopifyConfig = require('./shopify.js');
   
   const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
   const dotenv = require('dotenv');
   const { verifyRequest } = require('@shopify/koa-shopify-auth');
   const session = require('koa-session');
   
   dotenv.config();
   
   const port = parseInt(process.env.PORT, 10) || 3000;
   
   var dev = process.env.NODE_ENV !== 'production'
   var app = next({
     dev,
     conf: { distDir: `${path.relative(process.cwd(), __dirname)}/next` }
   })
   var handle = app.getRequestHandler()
   
   const server = new Koa();
   
   server.use(session(server));
   server.keys = [ShopifyConfig.secretKey];
   
   server.use(
     createShopifyAuth({
       apiKey: ShopifyConfig.key,
       secret: ShopifyConfig.secretKey,
       scopes: [],
       afterAuth(ctx) {
         const { shop, accessToken } = ctx.session;
         ctx.redirect('/');
       },
     }),
   );
   
   server.use(verifyRequest());
   
   server.use(async (ctx) => {
     await handle(ctx.req, ctx.res);
     ctx.respond = false;
     ctx.res.statusCode = 200;
   
   });
   
   exports.next = functions.https.onRequest((req, res) => {
     console.log('File: ' + req.originalUrl) // 

     // This is old code
     // return app.prepare().then(() => {
     //   handle(req, res);
     // })

     // I tried this #1
     // server.callback(req, res);
   })

   // I tried this #2
   // exports.next = functions.https.onRequest(server.callback);

   // I tried this #3
   // exports.next = functions.https.onRequest(server.callback());

   // I tried this #4
   exports.next = functions.https.onRequest((req, res) => {
     console.log('File: ' + req.originalUrl) 
   
     return app.prepare().then(() => {
       server.callback(req, res);
       //handle(req, res);
     })
   })

My question is now based on koa what code should be in functions.https.onRequest ?

I tried #1, #2, #3, as well as this post

1 -> I get request timeout

2 -> I get request timeout

3 -> I get Cannot access middleware of undefined

4 -> I get request timeout

[amardeepsingh20]

@kvindasAB Thanks Your solution works

Were you able to get the authentication part working? It seems to keep going in a loop and never authenticate.

createShopifyAuth({
       apiKey: ShopifyConfig.key,
       secret: ShopifyConfig.secretKey,
       scopes: [],
       afterAuth(ctx) {
         const { shop, accessToken } = ctx.session;
         ctx.redirect('/');
       },
     }),

This does not seem to be creating the /auth and /auth/callback routes properly in the firebase cloud functions environment. Any ideas?

[RezaRahmati]

@kvindasAB Thanks Your solution works