Is this the correct config? (Warning, setup code heavy: server.js, webpack, package.json)

51 3 7

I believe the setup is:


1. Setup a webpack server on a port

2. Setup ngrok to reverse proxy to that port

3. Have a koa server with shopify middleware to listen for requests on that port.


I'm a bit lost on how the source code and bundle.js code play into this. Can someone review my config? 


1. I think the code I need to use for dev is npm run devserver though the addition of next in the tutorial leaves open questions. If this command is incorrect please let me know:


// package.json
: {
"devserver": "webpack-dev-server --mode development --open --hot && node server.js",
"build": "next build",
"production": "webpack --mode production && NODE_ENV=production node server.js",
"test": "jest --watch"


2. I believe webpack dev server will handle output to the reverse proxy during development, is that correct? If so, how should I handle the output file during production? I'm not clear on that point:


// webpack.config
path = require('path');

module.exports = {
entry: "./src/index.tsx",
module: {
rules: [
test: /\.tsx?$/,
use: 'awesome-typescript-loader',
exclude: /node_modules/,
resolve: {
extensions: [ '.ts', '.tsx', '.js' ],
output: {
filename: 'webpackBundle.js',
path: path.resolve(__dirname, 'productionFiles'),
, watch : true
, watchOptions: {
aggregateTimeout: 300
, devtool : 'source-map'
, mode : 'development'


3. Finally, here is my server.js file. I did follow the tutorial. If my commentary is wrong somewhere or I'm overlooking something, please let me know.


// server.js
const dotenv = require('dotenv');
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 port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';

// create a server object and assign to app. dev is a config option dev mode (boolean)
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;

app.prepare().then(() => {
// create a Koa server session and set .keys property to the shopify secret key
const server = new Koa();
server.keys = [SHOPIFY_API_SECRET_KEY];

// add shopify middleware
// set keys again (including public key
// set the desired scopes to be accessed by the app
scopes: ['read_products'],
afterAuth(context) {
// a shop object and access Token are available from the afterAuth callback's context input.
// this means a callback function exposes an object with a shop and accesstoken object, to be used (or ignored)
const { shop, accessToken } = context.session;

// server redirects user from /auth, and back to the root url

// this is a middleware that verifies all requests
// the request handler middleware, taken out of the koa app, is set to capture requests and capture/handle responses
server.use(async context => {
await handle(context.req, context.res);
context.respond = false;
context.res.statusCode = 200;
// return;

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



Shopify Expert
667 170 215

This is an accepted solution.

Hi, @seandz ,

This is Evita from On The Map.


Maybe you want to check out new Shopify app CLI? It will generate server.js, webpack, react app for you. It's still in Beta, but I use this CLI all the time. Saves up a lot of time.



On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like