https://github.com/aaronksaunders/appwrite-vue-chat
Appwrite Ionic Vue Chat - using appwrite auth and realtime functionality
https://github.com/aaronksaunders/appwrite-vue-chat
appwrite appwrite-auth appwrite-cloud appwrite-database appwrite-realtime
Last synced: 2 months ago
JSON representation
Appwrite Ionic Vue Chat - using appwrite auth and realtime functionality
- Host: GitHub
- URL: https://github.com/aaronksaunders/appwrite-vue-chat
- Owner: aaronksaunders
- Created: 2023-06-22T00:18:53.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-06-28T17:57:45.000Z (almost 2 years ago)
- Last Synced: 2025-01-21T20:11:20.683Z (4 months ago)
- Topics: appwrite, appwrite-auth, appwrite-cloud, appwrite-database, appwrite-realtime
- Language: Vue
- Homepage:
- Size: 526 KB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Appwrite Chat With Ionic Vue
==
>NOTE : when setting up app in Appwrite set the host to `cloud.appwrite.io` or else realtime will not work on device
## Setup Appwrite Project
- set up a project in Appwrite Cloud, be sure to set the host to `cloud.appwrite.io`
- set authentication to `email`
- create a database
- create a collection, in the collection there are three fields
| Field Name | Required | Type |
|--------|----------|------|
| `message` | true| String 512 |
| `owner` | true | String 128 |
| `displayName` | false | String 128 |
- in Collection > Settings set Update the permissions so that users can create documents and turn on "Document Security"
- Be sure to get the `ProjectID`, `DatabaseID`, `CollectionID`; you will need them for the `.env` file which will be used by the application
## Setup Ionic Vue App
you must modify the `capacitor.config.ts` file for the application to work properly on ios.
```javascript
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'appwrite-chat',
webDir: 'dist',
// when building for IOS you must set the host name,
server : {
hostname : 'cloud.appwrite.io',
},
plugins: {
CapacitorCookies: {
enabled: true,
}
},
};
export default config;
```
Make sure you set you `.env` file properly using the values from your Appwrite Project. There is an example file, `.env.example` you can use to help ensure you collect the proper environment variables
```javascript
VITE_APPWRITE_ENDPOINT=
VITE_APPWRITE_PROJECT=
VITE_APPWRITE_DB=
VITE_APPWRITE_COLLECTION=
```
## Android Quirks
You must remove the complete `server` property in the capacitor.config when running on Android or the app will not work at all
```javascript
import { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'appwrite-chat',
webDir: 'dist',
// when building for Android you MUST remove the server config
//server : {
// hostname : 'cloud.appwrite.io',
//},
plugins: {
CapacitorCookies: {
enabled: true,
}
},
};
export default config;