Blitz Recipes

[aem]

Blitz Recipes are almost production-ready! We've got a working recipe to install Tailwind CSS, and @Zeko369 is working on one for Chakra. What other libraries would you like to see an automated installer for? This list will be updated based on the discussion below

• Tailwind CSS
• Chakra @Zeko369
• Theme UI @aem
• Cypress @aem
• Emotion
• Styled-components
• Render.com
• Google analytics
• Fathom analytics
• Sentry
• MDX
• Material UI

[flybayer]

Emotion
Styled-components
Render.com (the Render.yaml for deployment)
Google analytics
Fathom analytics
Sentry
MDX

[flybayer]

Actually wait on Sentry until I finalize the error boundary.

Add material UI

[Zeko369]

I'll also try adding PM2 for deployment in a couple of days and maybe play around with dokku.

[LoriKarikari]

I'll try adding a multi-stage Docker setup if that's fine?

[flybayer]

Yes! Already a couple options here: https://github.com/blitz-js/blitz/issues/289

[LoriKarikari]

These examples are pretty basic and missing some stuff if you want a multi-stage setup. Should I create a full fledged setup and users should delete all the unwanted stuff themselves? I can imagine not everyone needs an advanced setup. That's why I was asking in Slack if it was possible to add prompts and stuff. So you could customise the setup.

[flybayer]

Good question. Probably if someone is using docker, they will know enough to half-way understand the file and remove things if need.

So I think add everything, and comment it well.

[DevanB]

• Stripe
• i18n (I think Next struggles with this still, so might be hard)
• A worker queue solution

These would all be awesome recipes and Blitz on the map even more for public consumption.

[Zeko369]

I think that next is working on build in / first party solution for i18n so it might be smart to wait for that or just add next-i18n

[wKovacs64]

I'm trying Emotion but I don't know anything about this AST stuff yet, so it's slow going. 🙂

[flybayer]

This may help if you haven't found it already: https://astexplorer.net/

[wKovacs64]

Oh yeah, leaning on that heavily already. 😁

[remidej]

I've never used Storybook, but I think it can be a good match for Recipes

[enricoschaaf]

Maybe, a Preact recipe, using it for quite some time and has never let me down.

[LoriKarikari]

Maybe we can add a recipe too that creates a database on Digital Ocean? This can be done with Pulumi which is an IAC tool in TypeScript (I think). I can take a look at that when I have some time. Still need to finish the Docker recipe too... 😅

[flybayer]

Ooo, that could be cool

[enricoschaaf]

Maybe we could to something similar with Heroku, maybe on blitz new you choose your database provider and your hosting provider and when you deploy for the first time the build tool uses the Heroku CLI to create a free database, swap the url, run the migration.🤔

[MrLeebo]

What about a recipe for websockets, like Pusher or Socket.io?

[falleng0d]

Ant Design like materialui is a huge ui framework. It has some considerations when setting it up with nextjs. I belive having a template for it will be very useful. I can even provide a configuration of my own

[openspaceranger]

Are all the recipes still usable post pivot? The reason I ask is because the material-ui recipe has not been updated for two years, and I was getting some strange errors:

 ⚠ ./src/app/blitz-server.ts
Attempted import error: 'setupBlitzServer' is not exported from '@blitzjs/next' (imported as 'setupBlitzServer').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'AuthServerPlugin' is not exported from '@blitzjs/auth' (imported as 'AuthServerPlugin').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'PrismaStorage' is not exported from '@blitzjs/auth' (imported as 'PrismaStorage').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'simpleRolesIsAuthorized' is not exported from '@blitzjs/auth' (imported as 'simpleRolesIsAuthorized').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'RpcServerPlugin' is not exported from '@blitzjs/rpc' (imported as 'RpcServerPlugin').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'BlitzLogger' is not exported from 'blitz' (imported as 'BlitzLogger').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx
2024-01-16 05:55:24.931 INFO    [blitz-invoke]  getCurrentUser() Starting with input: null
2024-01-16 05:55:24.939 DEBUG   [blitz-invoke]  getCurrentUser() Result: null
2024-01-16 05:55:24.943 INFO    [blitz-invoke]  getCurrentUser() Finished: resolver:12ms serializer:0ms total:12ms
 ⚠ ./src/app/blitz-server.ts
Attempted import error: 'setupBlitzServer' is not exported from '@blitzjs/next' (imported as 'setupBlitzServer').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'AuthServerPlugin' is not exported from '@blitzjs/auth' (imported as 'AuthServerPlugin').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'PrismaStorage' is not exported from '@blitzjs/auth' (imported as 'PrismaStorage').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'simpleRolesIsAuthorized' is not exported from '@blitzjs/auth' (imported as 'simpleRolesIsAuthorized').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'RpcServerPlugin' is not exported from '@blitzjs/rpc' (imported as 'RpcServerPlugin').

Import trace for requested module:
./src/app/blitz-server.ts
./src/app/page.tsx

./src/app/blitz-server.ts
Attempted import error: 'BlitzLogger' is not exported from 'blitz' (imported as 'BlitzLogger').