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

Solved
Highlighted
Excursionist
34 3 1

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
"scripts"
: {
"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
const
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
require('isomorphic-fetch');
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');

dotenv.config();

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.use(session(server));
server.keys = [SHOPIFY_API_SECRET_KEY];

// add shopify middleware
server.use(
// set keys again (including public key
// set the desired scopes to be accessed by the app
createShopifyAuth({
apiKey: SHOPIFY_API_KEY,
secret: SHOPIFY_API_SECRET_KEY,
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
ctx.redirect('/');
},
}),
);

// this is a middleware that verifies all requests
server.use(verifyRequest());
// 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}`);
});
});

 

 

0 Likes

Success.

Trailblazer
541 131 175

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. https://github.com/Shopify/shopify-app-cli

 

Best,
Evita

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