Skip to content

Commit 0d13d23

Browse files
devnamdev2003devnamdev2003
committed
update
1 parent c274eb3 commit 0d13d23

12 files changed

Lines changed: 1155 additions & 97 deletions

File tree

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
/.angular
44
/dist/
55
/out-tsc/
6+
/android/

‎apk.md‎

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
1+
# 🌟 FULL GUIDE — Angular App → Android APK (with Live Updates via Vercel)
2+
3+
---
4+
5+
## 🧱 **STEP 1: Prepare your Angular project**
6+
7+
Open your project folder.
8+
9+
Make sure it runs locally first:
10+
11+
```bash
12+
ng serve
13+
```
14+
15+
If everything works, stop it and build for production:
16+
17+
```bash
18+
ng build --configuration production
19+
```
20+
21+
After build, verify you have:
22+
23+
```
24+
dist/project-name/browser/index.html
25+
```
26+
27+
✅ This folder contains your compiled Angular app.
28+
29+
---
30+
31+
## 🌐 **STEP 2: Host on Vercel (Auto Deploy from GitHub)**
32+
33+
### 1️⃣ Push your code to GitHub
34+
35+
If you haven’t already:
36+
37+
```bash
38+
git init
39+
git add .
40+
git commit -m "Initial commit"
41+
git branch -M main
42+
git remote add origin https://github.com/<your-username>/<your-repo>.git
43+
git push -u origin main
44+
```
45+
46+
### 2️⃣ Go to [https://vercel.com](https://vercel.com)
47+
48+
* Log in with **GitHub**
49+
* Click **“Add New Project”**
50+
* Select your **Angular repo**
51+
52+
### 3️⃣ Configure Build Settings (important)
53+
54+
| Setting | Value |
55+
| -------------------- | ------------------------------------- |
56+
| **Root Directory** | `./` |
57+
| **Build Command** | `ng build --configuration production` |
58+
| **Output Directory** | `dist/project-name/browser` |
59+
60+
Then click **Deploy 🚀**
61+
62+
### 4️⃣ Test your hosted app
63+
64+
After build, open the URL Vercel gives you:
65+
66+
```
67+
https://project-name.vercel.app
68+
```
69+
70+
✅ Your Angular app is now live online!
71+
Each time you push to GitHub, Vercel **auto-updates** it.
72+
73+
---
74+
75+
## ⚙️ **STEP 3: Add Capacitor to wrap Angular into Android**
76+
77+
In your Angular project folder:
78+
79+
```bash
80+
npm install @capacitor/core @capacitor/cli
81+
npm install @capacitor/android
82+
npx cap init
83+
```
84+
85+
When asked:
86+
87+
* **App name** → `App name`
88+
* **App ID** → `com.project-name.app`
89+
90+
---
91+
92+
## 📱 **STEP 4: Add the Android platform**
93+
94+
```bash
95+
npx cap add android
96+
```
97+
98+
This creates a folder:
99+
100+
```
101+
android/
102+
```
103+
104+
That’s your native Android project (for Android Studio).
105+
106+
---
107+
108+
## 🌍 **STEP 5: Make the Android app load your live hosted version**
109+
110+
Edit your file `capacitor.config.ts` like this:
111+
112+
```ts
113+
import { CapacitorConfig } from '@capacitor/cli';
114+
115+
const config: CapacitorConfig = {
116+
appId: 'com.project-name.app',
117+
appName: 'App name',
118+
webDir: 'dist/project-name/browser',
119+
server: {
120+
url: 'https://project-name.vercel.app', // 👈 Your live Vercel URL
121+
cleartext: true
122+
}
123+
};
124+
125+
export default config;
126+
```
127+
128+
This makes your Android app load your **live site from Vercel** instead of local files.
129+
130+
---
131+
132+
## 🔁 **STEP 6: Sync Capacitor changes**
133+
134+
```bash
135+
npx cap sync
136+
```
137+
138+
---
139+
140+
## 🧩 **STEP 7: Open Android Studio**
141+
142+
```bash
143+
npx cap open android
144+
```
145+
146+
Android Studio will open your native project.
147+
148+
---
149+
150+
## ▶️ **STEP 8: Run the app**
151+
152+
In Android Studio:
153+
154+
1. Plug in your Android device (enable USB debugging) or start an emulator
155+
2. Click the **green ▶️ Run** button
156+
157+
💥 Your Angular app will now run as a **native Android app**, loading data from your Vercel site.
158+
159+
---
160+
161+
## 🔄 **STEP 9: Auto Updates (no new APKs needed)**
162+
163+
Here’s the magic part 💫
164+
165+
Whenever you:
166+
167+
```bash
168+
git add .
169+
git commit -m "update"
170+
git push
171+
```
172+
173+
👉 Vercel automatically rebuilds and redeploys.
174+
👉 Your Android app instantly shows the new version the next time it’s opened.
175+
✅ No APK rebuild or resend required!
176+
177+
---
178+
179+
## 📦 **STEP 10: Build a Release APK (optional)**
180+
181+
When you’re ready to share or upload to Play Store:
182+
183+
In Android Studio:
184+
185+
```
186+
Build → Build Bundle(s)/APK(s) → Build APK(s)
187+
```
188+
189+
You’ll find your APK here:
190+
191+
```
192+
android/app/build/outputs/apk/release/app-release.apk
193+
```
194+
195+
You can now install this on any device.
196+
197+
---
198+
199+
200+
201+
## ✅ FINAL WORKFLOW SUMMARY
202+
203+
| Step | Command / Action |
204+
| ------------------------- | -------------------------------------- |
205+
| Build Angular | `ng build --configuration production` |
206+
| Push to GitHub | `git push` |
207+
| Vercel deploys | (auto) |
208+
| Update Android app config | Edit `capacitor.config.ts` once |
209+
| Sync to Android | `npx cap sync` |
210+
| Run in Studio | `npx cap open android` → ▶️ |
211+
| Future updates | Just push to GitHub — app auto-updates |
212+
213+
---

‎capacitor.config.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { CapacitorConfig } from '@capacitor/cli';
2+
3+
/**
4+
* The Capacitor configuration object for the ExpenseWise app.
5+
*/
6+
const config: CapacitorConfig = {
7+
/** Unique app package identifier (reverse-domain format) */
8+
appId: 'com.expensewise.app',
9+
10+
/** Display name of the app as it appears on the device home screen */
11+
appName: 'Exwise',
12+
13+
/** Path to the directory containing the built web application */
14+
webDir: 'dist/expense-wise/browser',
15+
16+
/** Server configuration for live reload and production connections */
17+
server: {
18+
/** Deployed URL of the web app (used for live preview or production API access) */
19+
url: 'https://exwisedev.vercel.app',
20+
21+
/** Allow non-HTTPS traffic for local debugging purposes */
22+
cleartext: true
23+
}
24+
};
25+
26+
export default config;

‎dev.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ npm install lucide-angular
44
npm install marked
55
npm install -g @compodoc/compodoc
66
npm install jspdf jspdf-autotable xlsx
7+
npm install @capacitor/core @capacitor/cli
8+
npm install @capacitor/android
79

810
commands:
911

‎documentation/components/SettingsComponent.html‎

Lines changed: 2 additions & 2 deletions
Large diffs are not rendered by default.

‎documentation/coverage.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,18 @@
136136
</tr>
137137
</thead>
138138
<tbody>
139+
<tr class="very-good">
140+
<td>
141+
<!-- miscellaneous -->
142+
<a href="./miscellaneous/variables.html#config">capacitor.config.ts</a>
143+
</td>
144+
<td>variable</td>
145+
<td>config</td>
146+
<td align="right" data-sort="100">
147+
<span class="coverage-percent">100 %</span>
148+
<span class="coverage-count">(1/1)</span>
149+
</td>
150+
</tr>
139151
<tr class="low">
140152
<td>
141153
<!-- miscellaneous -->

‎documentation/dependencies.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,14 @@
138138
<b>@angular/service-worker</b> : ^19.2.0</li>
139139
<li>
140140
<b>@angular/ssr</b> : ^19.2.6</li>
141+
<li>
142+
<b>@capacitor/android</b> : ^7.4.4</li>
143+
<li>
144+
<b>@capacitor/cli</b> : ^7.4.4</li>
145+
<li>
146+
<b>@capacitor/core</b> : ^7.4.4</li>
147+
<li>
148+
<b>@capacitor/status-bar</b> : ^7.0.3</li>
141149
<li>
142150
<b>apexcharts</b> : ^4.7.0</li>
143151
<li>

‎documentation/js/search/search_index.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎documentation/miscellaneous/variables.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -150,6 +150,9 @@ <h3 id="index">Index</h3>
150150
<li>
151151
<a href="#Chart" title="src/app/component/pie-chart/pie-chart.component.ts" ><b>Chart</b>&nbsp;&nbsp;&nbsp;(src/.../pie-chart.component.ts)</a>
152152
</li>
153+
<li>
154+
<a href="#config" title="capacitor.config.ts" ><b>config</b>&nbsp;&nbsp;&nbsp;(capacitor.config.ts)</a>
155+
</li>
153156
<li>
154157
<a href="#config" title="src/app/app.config.server.ts" ><b>config</b>&nbsp;&nbsp;&nbsp;(src/.../app.config.server.ts)</a>
155158
</li>
@@ -602,6 +605,59 @@ <h3></h3> <table class="table table-sm table-bordered">
602605
</tbody>
603606
</table>
604607
</section>
608+
<h3>capacitor.config.ts</h3>
609+
<section data-compodoc="block-properties">
610+
<h3></h3> <table class="table table-sm table-bordered">
611+
<tbody>
612+
<tr>
613+
<td class="col-md-4">
614+
<a name="config"></a>
615+
<span class="name">
616+
<span ><b>config</b></span>
617+
<a href="#config"><span class="icon ion-ios-link"></span></a>
618+
</span>
619+
</td>
620+
</tr>
621+
<tr>
622+
<td class="col-md-4">
623+
<i>Type : </i> <code>CapacitorConfig</code>
624+
625+
</td>
626+
</tr>
627+
<tr>
628+
<td class="col-md-4">
629+
<i>Default value : </i><code>{
630+
/** Unique app package identifier (reverse-domain format) */
631+
appId: &#x27;com.expensewise.app&#x27;,
632+
633+
/** Display name of the app as it appears on the device home screen */
634+
appName: &#x27;Exwise&#x27;,
635+
636+
/** Path to the directory containing the built web application */
637+
webDir: &#x27;dist/expense-wise/browser&#x27;,
638+
639+
/** Server configuration for live reload and production connections */
640+
server: {
641+
/** Deployed URL of the web app (used for live preview or production API access) */
642+
url: &#x27;https://exwisedev.vercel.app&#x27;,
643+
644+
/** Allow non-HTTPS traffic for local debugging purposes */
645+
cleartext: true
646+
}
647+
}</code>
648+
</td>
649+
</tr>
650+
651+
<tr>
652+
<td class="col-md-4">
653+
<div class="io-description"><p>The Capacitor configuration object for the ExpenseWise app.</p>
654+
</div>
655+
</td>
656+
</tr>
657+
658+
</tbody>
659+
</table>
660+
</section>
605661
<h3>src/app/app.config.server.ts</h3>
606662
<section data-compodoc="block-properties">
607663
<h3></h3> <table class="table table-sm table-bordered">

0 commit comments

Comments
 (0)