Detailing of server.js in next.js using node and react

Highlighted
New Member
13 0 0

Hi Team,

I am developing a shopify app for a client and are using node and react(Next.js) as the tech stack. We are following the same tutorial from the shopify website https://shopify.dev/tutorials/build-a-shopify-app-with-node-and-react . and i am almost using the same application code skeleton mentioned in the above link.

I have some doubts regarding the server.js file . This is my server.js file. Would be great if some one can explain and help me in detail. I am new to these technologies and stuck in many scenarios.

 

 

require('isomorphic-fetch');
const dotenv = require('dotenv');
dotenv.config();
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');
const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy');
const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');
const Router = require('koa-router');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const {
  SHOPIFY_API_SECRET_KEY,
  SHOPIFY_API_KEY,
  HOST,
} = process.env;

app.prepare().then(() => {
  const server = new Koa();
  const router = new Router();
  server.use(session({ sameSite: 'none', secure: true }, server));
  server.keys = [SHOPIFY_API_SECRET_KEY];

  server.use(
    createShopifyAuth({
      apiKey: SHOPIFY_API_KEY,
      secret: SHOPIFY_API_SECRET_KEY,
      scopes: ['read_products', 'write_products'],
      async afterAuth(ctx) {
        const { shop, accessToken } = ctx.session;
        ctx.cookies.set("shopOrigin", shop, {
          httpOnly: false,
          secure: true,
          sameSite: 'none'
        });
        
      }
    })
  );

  

  server.use(graphQLProxy({ version: ApiVersion.April19 }));

  router.get('*', verifyRequest(), async (ctx) => {
    await handle(ctx.req, ctx.res);
    ctx.respond = false;
    ctx.res.statusCode = 200;
  });

  server.use(router.allowedMethods());
  server.use(router.routes());

  server.listen(port, () => {
    console.log(`> Ready on http://localhost:${port}`);
  });
});

 

 

These are the areas which i need help.

1.  Is the below code in server.js execute only when the merchant installs the app? Is this code executes only one time, is there any possibility that it can execute again.?

server.use(

    createShopifyAuth({....  })    

);
  • If the merchant later opens the installed app(Not the first time) from the 'Apps' section in the store how does it get navigated to index.js in the pages folder.?
  • I understood the ctx.redirect('/') inside afterAuth is responsible for the redirection at the time of installation. But once it is installed and later on when accessing the app how its getting redirected to index.js without any code.  ?
2. If the app is successfully installed in the store and when the merchant later on loads the installed app from 'Apps' section, at that time I want to do some rest api call(External API residing in My Clients Server) and based on its response i want to redirect to separate pages(Detail Page and some other pages) & I need to pass the response to the page which i am redirected to . All the pages which in need for redirecting are also kept inside the pages folder. So i have my doubts in this scenario.  :-
  • How do i call the api from the server.js and where can i write the api call for that ? Is that the right practice?
  • If API can be called ,How do i pass the api response json to the redirected page from server.js?
  • If that API can be  called , based on its response i need to redirect to some other pages. How to redirect is another doubt, meaning - how to handle the context.redirect here? what is the code fragment that i can use and where it can be done in server.js

3. Next issue is regarding webhooks and accessToken.  I am registering webhook inside the createShopifyAuth() then below are the doubts.

  •  Will this code for webhook registration be triggered everytime while accessing the app ?
  • Or is that triggred only while doing the installation of app? 
  • Do we need to save the accessToken which we get when the code inside createShopifyAuth is exceuted on the installation time of the app ? Because some times when the server is restarted, i could see that webhook is not registering and going to failure case. Is that due to the accesToken expiration issue ? I am following the same method given in the shopify mentioned tutorial for handling webhook. 
  • As i mentioned in step 2 , I want to pass the shopId,email of the merchant to the external API everytime while loading the app(this should be included in the request body). For getting that i need to have a graphql query but i doubt  i  could get  the accessToken value outside createShopifyAuth.WHat is the solution for this

I really need advice on this and would be kind if anyone can provide the skelton code or technical guidance for that. I have included server.js code , anybody can please add the code skeleton in the same file and revert back.

 

 

 

0 Likes
Highlighted
New Member
13 0 0

Can anybody give any insight on this?

0 Likes