ionic-cli icon indicating copy to clipboard operation
ionic-cli copied to clipboard

Better support (or documentation) for `ionic serving` -- e.g. Next.js

Open timfee opened this issue 4 years ago • 0 comments

Hi there,

I'm not sure how to better phrase the title of this FR, and apologies if there's a pattern already out there.

Using the with-ionic-typescript template for Nextjs, I was unable to get Capacitor working out of the box, specifically ionic capacitor run ios -l -- as the serve.ts function seems to pass --host=foobar, which breaks next serve (or next dev, for my HMR purposes).

I was able to work around this by pointing ionic:serve to a custom script:

// package.json
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "export": "next export -o build",
    "ionic:serve": "./scripts/serve.sh"
}
## ./scripts/serve.sh

#!/bin/bash

for i in "$@"; do
  case $i in
  --host=*)
    HOST="${i#*=}"
    shift # past argument=value
    ;;
  --port=*)
    PORT="${i#*=}"
    shift # past argument=value
    ;;
  *)
    # unknown option
    ;;
  esac
done

yarn dev -p $PORT

Anyhoo, I'll post this here (and cross-link with the Vercel folks), as I really enjoy using both Ionic & Next.js, but getting them to place nicely wasn't immediately evident or documented, at least for this one user :).

Respectfully submitted, Tim

timfee avatar Jun 08 '21 00:06 timfee