https://github.com/bryanhogan/gametolearnkorean
https://github.com/bryanhogan/gametolearnkorean
Last synced: over 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/bryanhogan/gametolearnkorean
- Owner: BryanHogan
- Created: 2024-11-16T21:05:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-02T17:21:31.000Z (over 1 year ago)
- Last Synced: 2025-02-02T17:29:21.706Z (over 1 year ago)
- Language: Svelte
- Size: 281 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Game To Learn Korean
Make learning with flashcards more efficient and fun with a gamification approach.
Website not yet available.
App not yet available.
## Tech-Stack
- SvelteKit
- PostCSS: A css pre-processor, enhances CSS.
- CapacitorJS: Turn my website into an Android and iOS app.
- Tauri: Turn my website into a Windows and Mac app.
Additional libraries:
- es-hangul: https://es-hangul.slash.page/en/docs/introduction
## Setup
1. Setup SvelteKit project with `npx sv create my-app` - https://svelte.dev/docs/kit/creating-a-project
2. Add Capacitor - https://ionic.io/blog/cross-platform-sveltekit-capacitor-application-yes-its-possible
- `npm i @capacitor/core`
- `npm i -D @capacitor/cli`
- `npx cap init`
- Adjust capacitor.config.ts, change webDir to `build`.
- `npm i -D @sveltejs/adapter-static`. Add lines to `svelte.config.js` to change adapter to static, adjust first line and add options to adapter. (See guide on ionic.io)
- Create layout which sets prerender true. (See guide on ionic.io)
- Probably also want to download Android studio to develop Android app. Install Android Studio and setup emulator.
- More on using CapacitorJS here: https://capacitorjs.com/docs/getting-started
3. Add Tauri
- Tauri requires you to download
4. Add PostCSS
## Using Capacitor
The steps above is everything you need to setup the project.
To now open the app on the emulator we just need to:
- `npm run build`
- `npx cap sync`
- `npx cap open android`
What about "hot module reloading" / "live reloading"?
For that adjust the `vite.config.ts` and `capacitor.config.json`.
To vite.config.ts add this:
```
server: {
host: '0.0.0.0',
port: 5173,
}
```
To capacitor.config.json add this:
```
server: {
url: 'http://10.0.2.2:5173',
cleartext: true
}
```
How your vite.config.ts and capacitor.config.ts might look now:
```
//vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
server: {
host: '0.0.0.0',
port: 5173,
}
});
//capacitor.config.json
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'game.tolearnkorean.com',
appName: 'gametolearnkorean',
webDir: 'build',
server: {
url: 'http://10.0.2.2:5173',
cleartext: true
}
};
export default config;
```
Now to make running the server as well as starting the android emulator easier I made it all into one command which you can run with `npm run android-dev`. Add this to the `package.json` and then under `scripts`:
`"android-dev": "start /B npm run dev -- --host && npm run build && npx cap sync && npx cap open android"`
## Audit fixes
When I first setup SvelteKit and added Capacitor I had a few low severity vulnerabilities from the "npm audit report", using "npm audit fix --force" didn't work since it resulted in an error.
Deleting `node_modules` and `package-lock.json` and using pnpm instead solved this issue for me.
1. `npm install -g pnpm`
2. `pnpm install`
3. `pnpm audit --fix`
## Additional Notes
Tauri has recently added the option to not only turn your website into a Windows and Mac app, but also Android and iOS. But that it's still very new and has a much smaller plugin ecosystem.