nextjs-tailwind-ionic-capacitor-starter VS entr

wow, that's a weird limitation.

The README says: "SSR is currently disabled for the Next.js app as the app will be fully client-side rendered for iOS and Android. This is a limitation we are working to address in a future update."

I guess it's because CapacitorJS pre-bundles the entire PWA for the App Stores:

"Of course, you also could load the app completely remotely by changing the server.url configuration for Capacitor to point to your SSR'ed Next.js app, but that has other challenges such as App Store approval if the app doesn't check the boxes for Apple to qualify it as an app that has enough native integration (at that point this is on you, not Capacitor)"

https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-st...

But I don't understand why SSR would be disabled for the NextJS PWA on the web?

Maybe Max Lynch aka. @mlynch aka. @yesimahuman could provide some insight here.

If you want to use something like tailwind to customize the content of your pages, that is a decent option. You would use Ionic for the shell and Tailwind for your page designs. Take a look at this example if you want to explore that route (in React though): https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter

Max Lynch from Ionic has a great repo demonstrating this. He uses it to get Next to work with Ionic and Capacitor but the idea is essentially the same.

Agreed! Next.js works great with this model! I’d recommend Capacitor over Cordova (similar but more modern). Here’s an example: https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-st...

You can use Next with React Router, making it function exactly as a React app with nested routes. This project shows this working with Ionic's router, but the same setup can be used with React Router for the same outcome.

Also, note that this repository is a boilerplate for all 3, which uses ionic capacitor, in one repository: https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter , I guess it is not using nextjs SSR capability though.

If you're confused by all the project names and how they work together, don't worry, I'll break down each part of the stack each project is concerned with, along with some visuals and code samples demonstrating how all the projects work together. At the end I'll share a starter project with these technologies installed and working together that can form the foundation of your next app.

entr ("Event Notify Test Runner"; GitHub), is a command-line tool written by Eric Radman that allows running arbitrary commands whenever files change.

I use something very similar on https://lunar.fyi and https://lowtechguys.com but I wouldn’t call this “simple” anymore.

They use Jinja templating, I prefer Slim (https://github.com/slim-template/slim#syntax-example) which has a more Pythonic syntax (there is plim [0] in Python for that)

I use Tailwind as well for terse styling and fast experimentation (allows me to write a darkMode-aware and responsive 100 line CSS in a single line with about 10 classes)

For interaction I can write CoffeeScript directly in the page [1] and have it compiled by plim.

I run a Caddy static server [2] and use Syncthing [3] to have every file save deployed instantly to my Hetzner server.

I use entr [4] and livereloadx [5] to rebuild the pages and do hot reload on file save. All the commands are managed in a simple Makefile [6]

———

You can already see how the footnotes take up a large chunk of this comment, this is not my idea of simple. Sure, the end result is readable static HTML and I never have to fight obscure React errors, but it’s a high effort setup for starters.

Simple for me would be: write markdown files for pages, a simple CSS for general styling (should be optional), click to deploy on my domain. Images should automatically be resized to multiple sizes and optimized, videos re-encoded for smaller filesize etc.

I have mostly implemented that for myself (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...) but it feels fragile. I’d rather pay for a professional solution.

[0] https://plim.readthedocs.io/en/latest/

[1] https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...

[2] https://caddyserver.com/docs/command-line#caddy-file-server

[3] https://syncthing.net

[4] https://github.com/eradman/entr

[5] https://nitoyon.github.io/livereloadx/

[6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile

Try entr for fast reloading. Another one is hupper.

entr