Open
Description
When I create a new project, it let me name my project with dashes. Later on, this throws an Invalid App ID, forcing me to re-name.
It would be nice if Name for your new project: a name could trigger a "some-name" is an Invalid App ID due to {reason}, are you sure? yes / Different Name loop.
Easier may just be adding a hint to the Name for your new project: -> Name (alphanum and underscores) for your new project.
Below is creating a project with a dash:
~/dev ❯ npm create ionic-svelte-app@latest
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
create-ionic-svelte-app version 0.0.29
Welcome to Ionic Svelte
This script will install a SvelteKit project using their SvelteKit create script.
And then adds Ionic power to it - Ionic Elements, Ionicons (optional) and CapacitorJS (optiona
l)
- Ionicons - free package of icons to use in your app
- CapacitorJs - deploy you app as Android/iOS/Electron app, and use its plugin ecosystem to bu
ild cross-platform experience, also supporting PWA!
This is BETA software; expect bugs and missing features.
Problems? Open an issue on https://github.com/Tommertom/svelte-ionic-npm/issues.
✔ Name for your new project: … some-name
✔ Add type checking with TypeScript? › Yes, using TypeScript syntax
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes
✔ Add Vitest for unit testing? … No / Yes
✔ Add Ionicons? … No / Yes
✔ Add Capacitor for native (mobile) deployements? … No / Yes
Working: Creating base Svelte Kit install supercharged with Ionic.
Working: Installing project dependencies svelte-preprocess,@sveltejs/adapter-static,vite@4,@ca
pacitor/cli
Working: Adding @ionic/[email protected],ionic-svelte,@capacitor/core,ionicons
Working: Removing @sveltejs/adapter-auto
Working: Writing configs and default files
Your project is ready!
✔ Typescript
Inside Svelte components, use <script lang="ts">
✔ ESLint
https://github.com/sveltejs/eslint-plugin-svelte3
✔ Prettier
https://prettier.io/docs/en/options.html
https://github.com/sveltejs/prettier-plugin-svelte#options
✔ Playwright
https://playwright.dev
✔ Vitest
https://vitest.dev
✔ Capacitor
https://capacitorjs.com/docs/getting-started
Please note - the project is configured with HMR - remove server entry in capacitor.config.j
son for final build
✔ Ionicons
https://ionicsvelte.firebaseapp.com/components/Icon
Install community-maintained integrations:
https://github.com/svelte-add/svelte-adders
Capacitor configuration - see: capacitor.config.json|ts
App name some-name
Package name some-name.ionic.io
Vite dev server url http://192.168.137.1:5173/
Next steps:
1: cd some-name
2: npm i @capacitor/android and/or @capacitor/ios
3: npx cap add android and/or ios
4: npm run build to fill the build directory
5: npx cap sync sync the build into the target folder
6: npx cap open android or ios to open the project and mark as trusted
7: npm run dev -- --open
To close the dev server, hit Ctrl-C
Use the -hmr flag after your npx cap run/open/sync commands to use HMR together with npm run d
ev
Stuck? Visit us at Ionic's discord https://discordapp.com/channels/520266681499779082/10493885
01629681675
Need some help or found an issue with this installer? Visit us on Github https://github.com/To
mmertom/svelte-ionic-npm
~/dev ❯ cd some-name
~/dev/some-name ❯ npm i @capacitor/ios
added 1 package, and audited 295 packages in 609ms
50 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
~/dev/some-name ❯ npx cap add ios
[error] Invalid App ID "some-name.ionic.io". Must be in Java package form with no dashes (ex:
com.example.Metadata
Metadata
Assignees
Labels
No labels