Typescript??

[j-d-carmichael]

Issue summary

The full codebase is JS not TS.. where as clearly the shopify team writes in modern typescript https://github.com/Shopify/shopify-node-api

Expected behavior

To see typescript

Actual behavior

See javascript

[lukeclifton]

I would be interested to know if typescript for this repo is in the pipeline?

Would it make sense to use something like NestJS for the server and continue to use NextJS for the client?

Anyone else be interested in this?

[j-d-carmichael]

I don't know why this thing is even using nextjs.. there is zero requirement for SSR... sticking a heavily opinionated angular style backend framework on top.. that sounds like a whole world pain unless you happen to be a next & nest dev...

how about just a super simple and regular react app (without next) talking to a simple koa or express api.. let folk have a super easy entry to this shopify world and coupled with docs that are simple to follow :D

[lukeclifton]

Yeah i see your point. Keeping it simple works for easy entry but i find that most commercial projects really benefit from a more opinionated framework with the normal required features.

Maybe theres a need for a two projects, one for starters and one for more advanced commercial use.

But either way, having this repo support typescript would be most ideal.

[j-d-carmichael]

I cannot imagine that any company is using this code as-is.. the biggest hurdle we found was understanding the shopify code to be able to reverse engineer it into our own style of working :) so the simpler the better.. but yea it's 2022 Shopify.. bring the typescript :D

[nikolan]

I have only just started build an app and it is extremely frustrating to use the node app from the cli. It seems to have been hacked together to run in development as a learning material rather than a foundation for producing a production app.
How do people here build the server after converting to typescript, I'm really struggling with unpicking the babel-preset and the server/index.js ?

[lukeclifton]

@nikolan I build the server with:
"build:server": "tsc --project tsconfig.server.json", (package.json script)

I use tsc for building and ts-node for development.

The server has its own tsconfig.json file.

[nikolan]

Thanks, @lukeclifton! Do you call "build:server" separately from your build pipeline or is it perhaps a naming convention to integrate with the rest of the build?
What do you deploy in? I'm using docker and the final image is about 104MB when pushed in the registry.
I thought of trying some bundeling with esbuild. I don't have much experience running nodejs in production, so filtering noise from signal is still difficult. Thus I found out that the server/index.js should not be run in production.
Does anyone have any advice on how to build the server with esbuild or perhaps webpack?

[jono-allen]

I got a fork of this working with next.js and typescript
You can find it here https://github.com/solvedata/shopify-app-nextjs-typescript

[j-d-carmichael]

@jono-allen that's cool - we hit another issue.

The koa-middleware from shopify is somewhat covertly being deprecated. We submitted our app and it got rejected based on an outdated api attribute:

Shopify/koa-shopify-auth#134

https://github.com/Shopify/shopify-node-api/tree/main/docs looks to be the new way.

Shopify are being wildly unprofessional here and incredibly cavalier with other businesses money in dev time, it is completely ridiculous.

[nikolan]

Thanks @jono-allen, this looks great!
@j-d-carmichael I appreciate the feedback on the auth. It is a shame they haven't at least documented it.

[jono-allen]

@j-d-carmichael thanks for pointing that out, our plan was to start building our app out but good now we know we need another starter project before then.
Very disappointing the readme hasn't been updated to reflect this on the cli.

I found a link to this repo on the shopify-node-api repo

I'm going to try that and then might convert it to typescript and go from there

[lukeclifton]

@jono-allen This repo looks great. Thanks for sharing.

I have actually been working on a project which uses a similar approach using only NextJS and going serverless on Vercel.
Seems to work really well and for most simple apps should make a great commercial choice.

[nikolan]

@lukeclifton did you get it to generate both online and offline tokens? I am thinking to retrofit a shopify cli generated app to this approach.

[lukeclifton]

Hey @nikolan. I have only implemented auth for offline tokens but it would be simple enough to implement both.

[nikolan]

Looks like Shopify are pivoting towards Express.

npx degit shopify/shopify-app-node#sample_app_updates

I started building our app with their early release of the example app. It has been an upward struggle for me to convert it to Typescript.

[lukeclifton]

@nikolan Thanks. Hadn't noticed the update until seeing your message.

[lukeclifton]

I can help convert to typescript once its stabilised

[j-d-carmichael]

Yea we released our app using their Koa garbage patch code in pure js.. not ideal but.. our api only acts as a gateway/proxy to the rest of our systems internally

We found in one of the many issue other people also raised on their code, someone forked and got working their original koa auth package, "simple-koa-shopify-auth" https://www.npmjs.com/package/simple-koa-shopify-auth hats off to this fella! With this we were able to publish our app using shopify's latest api, so bypassed the 6-8 month deprecation deadline.

(We did find though that when you explain to the app reviewer the situation and point to these issue and that their own systems are a mess, they will allow you to publish your app with the use of the old API... but.. it will die soon.. hence the switch)

We will wait now for shopify to finalise their changes on the express migration, hopefully it is a better system that the outdated files that get lumped onto your drive via their "shopify cli tool"

We also found that removing that ngroc thing actually speeds up the development time, just syncing code through a public domain.. which essentially leaves the "cli tool" a redundant waste of space :D

the frustration with shopify... it is insane that they can existing on the market as they do.. feels like the have left the door wide wide open for a competitor

[jakobbouchard]

Kinda related to the starter app being a pain, is there any good documentation or another custom starter template that is made for a standalone app instead of an embedded one? I'm starting to create a quite complex custom app and I don't want it embedded in the admin.

[nikolan]

Has anyone managed to get their latest node-app running with TS?

[nikolan]

This is the closest thing I found to a working example. Hats off to @LeonelAimar for building it.
https://github.com/LeonelAimar/new-shopify-node-ts-app-boilerplate

I had to go get acquainted with esm modules (Node.js TS is my second language). So in the end this is what my scripts look like:

 "scripts": {
    "build": "npx tsc && yarn run build:client",
    "build:client": "vite build --outDir dist/client",
    "debug": "node --inspect-brk server/index.js",
    "newDev": "cross-env NODE_ENV=development nodemon",
    "dev": "tsc && cross-env NODE_ENV=development nodemon --experimental-specifier-resolution=node dist/server/index.js --watch ./src/**/*",
    "prepare": "husky install",
    "serve": "node --experimental-specifier-resolution=node dist/server/index.js",
    "start": "yarn run serve",
    "test": "vitest --reporter=verbose"
  },

[LeonelAimar]

This is the closest thing I found to a working example. Hats off to @LeonelAimar for building it. https://github.com/LeonelAimar/new-shopify-node-ts-app-boilerplate/blob/master/src/server/middlewares/authHandlers.ts

I had to go get acquainted with esm modules (Node.js TS is my second language). So in the end this is what my scripts look like:

 "scripts": {
    "build": "npx tsc && yarn run build:client",
    "build:client": "vite build --outDir dist/client",
    "debug": "node --inspect-brk server/index.js",
    "newDev": "cross-env NODE_ENV=development nodemon",
    "dev": "tsc && cross-env NODE_ENV=development nodemon --experimental-specifier-resolution=node dist/server/index.js --watch ./src/**/*",
    "prepare": "husky install",
    "serve": "node --experimental-specifier-resolution=node dist/server/index.js",
    "start": "yarn run serve",
    "test": "vitest --reporter=verbose"
  },

hey @nikolan ! ty so much, i'm glad to hear that you found that middleware useful, i was working a lot on creating that folder structure and POO based on their boilerplate app, but then got overburned at work and still haha. The idea of building this was just to keeping the back & front separated so everyone would be able to use either frontend framework they want, also to have the backend on a more default folder structure. Also glad that Shopify decided to rollback from that Nextjs version of the boilerplate, i just find more scalable and for more people to be comfortable with this type of app structure, backend and frontend separated as you can use (or not) any framework.

[nikolan]

@LeonelAimar I found the whole setup useful, I meant to link the repo but seem to have copied a link to a particular file. I've edited the original comment with the correct link now. Thanks again for putting it out there and I hope you get the time you need to keep it up as I am sure other people will be flocking to it for the TS goodness.

[kanzitelli]

Hey guys! I've come up with this setup https://github.com/kanzitelli/shopify-app-template-typescript. Fully bootstrapped from their template and just wrapped with TS configuration (not an expert tho). I've been testing on my machine with dev and prod environments, and it seems to be working well. Would be great if you could test it on your side too :)

[nikolan]

@kanzitelli that's pretty neat. I like that you are talking about production setup in your README. Running apps in production and building resilient apps are topics I find seriously lacking in any Shopify documentation aimed at onboarding new developers.

[LeonelAimar]

@LeonelAimar I found the whole setup useful, I meant to link the repo but seem to have copied a link to a particular file. I've edited the original comment with the correct link now. Thanks again for putting it out there and I hope you get the time you need to keep it up as I am sure other people will be flocking to it for the TS goodness.

Oh well, that's awesome! i really appreciate that!! I'll try to keep updating it with some upgrades! Take care bud 👍 !!

[stevepsharpe]

I got a fork of this working with next.js and typescript You can find it here https://github.com/solvedata/shopify-app-nextjs-typescript

@jono-allen Do you still have a working version of this? I think I'd rather use Next

[archiemcquaid]

Here are the steps to add TS, ESLint & Prettier to an Shopify 3.x CLI generated app, at least to the frontend side.

[KaiSpencer]

Ive started a port of the CLI generated app to typescript.
Frontend is done and most of the express backend is done.

Feel free to use this to get started :)
https://github.com/KaiSpencer/shopify-app-template-node-ts

[github-actions]

This issue is stale because it has been open for 60 days with no activity. It will be closed if no further action occurs in 14 days.

[cyrilchapon]

Commenting because.
This shouldn't be closed as of 2022 basically there is no decent reason not to use Typescript.

This app template should be rewriten.

[knsakib]

Ive started a port of the CLI generated app to typescript. Frontend is done and most of the express backend is done.

Feel free to use this to get started :) https://github.com/KaiSpencer/shopify-app-template-node-ts

is it completed?

[knsakib]

Hey guys! I've come up with this setup https://github.com/kanzitelli/shopify-app-template-typescript. Fully bootstrapped from their template and just wrapped with TS configuration (not an expert tho). I've been testing on my machine with dev and prod environments, and it seems to be working well. Would be great if you could test it on your side too :)

Are you able to convert the boilerplate of Shopify cli 3.x?

[cyrilchapon]

@KaiSpencer , I'm highly interested on collaborating on your template as it's the closest working thing I've seen so far. How can I reach you ?

[KaiSpencer]

@KaiSpencer , I'm highly interested on collaborating on your template as it's the closest working thing I've seen so far. How can I reach you ?

@knsakib @cyrilchapon If you open an issue on my repo we can discuss things there. :)

[tomoyanakano]

I converted Template that made with Shopify CLI 3.x to Typescript.
Please try it if you have some problems.
https://github.com/tomotomy/shopify-app-template-node-typescript

[knsakib]

I converted Template that made with Shopify CLI 3.x to Typescript. Please try it if you have some problems. https://github.com/tomotomy/shopify-app-template-node-typescript

Amazing!! It is working!! respect!! 🙏🙏 Thank you very much!!

[blanklob]

Thanks bro @tomotomy I added it to my Discord.

[tomoyanakano]

@blanklob
Thanks! I'll check your Discord server 👋

[cyrilchapon]

@tomotomy with @KaiSpencer we continued the work over there on his repo : https://github.com/KaiSpencer/shopify-app-template-node-ts

why not joining forces over there ? I can make a diff once maybe, check differences between repos and keep the best of each. There are basically the same, (cli 3 was already implemented there)

[tomoyanakano]

@cyrilchapon
Thank you for sharing. I'll check the repo!

[SaeedYasin]

Here is an updated template with Typescript and Prisma etc. https://github.com/SaeedYasin/shopify-app-template-node

[blanklob]

Is your template still updated with Shopify current JS alternative? @SaeedYasin

[SaeedYasin]

@blanklob yes, it's up to date.

[blanklob]

Thanks I will use it 💚

[lukeclifton]

So I come back to this thread and still wonder if adding a Typescript option to the official node app repo is part of the roadmap or not?

@paulomarg @mkevinosullivan Can you shed any light on this?

When using the Shopify 3.0 CLI for apps and generating an extension you get the option to roll Javascript OR Typescript.

Something similar for this app boilerplate seems like what should exist?

[mkevinosullivan]

@lukeclifton Writing this template in JavaScript was an intentional decision when it was first created in order to support novice developers who were also going through the tutorials on https://shopify.dev.

As of now, converting the current app template to TypeScript is not on the roadmap, and not likely to be revisited anytime soon given the staff reductions last week.

[cyrilchapon]

Commenting because.
This shouldn't be closed as of 2023 basically there is no decent reason not to use Typescript.

This app template should be rewriten.

[j-d-carmichael]

100% agree.

[rajdeepkhandelwal]

Yes agree.

[pyyding]

Would be very cool if I didn't get red squiggly lines all across the project after initializing the app by the docs tho 🙄

[maruffahmed]

Please plan for the typescript template of this. Or I would also be ok if there is official guide about how to use typescript with this template if anyone want like the remix template.

[pyyding]

@maruffahmed just rename .js -> .ts 😄