Configure, run, build and deploy the Angular-based Mifos user interface and connect it securely to an Apache Fineract backend.
Before installation
Step-by-step
Download the official source and enter the project directory.
git clone https://github.com/openMF/web-app.git
cd web-appUse the stable branch or a reviewed commit. Record the exact commit so the deployment can be reproduced later.
git checkout main
git branch --show-current
git rev-parse HEAD
git describe --tags --alwaysInspect the project files before installing dependencies. Do not assume an arbitrary Node.js version.
cat package.json | sed -n '1,220p'
grep -n "\"engines\"" package.json
grep -n "\"@angular/core\"" package.json
grep -n "\"@angular/cli\"" package.jsonVerify that the installed versions match the requirements of the selected source version.
node --version
npm --versionUse npm ci when package-lock.json is available so the dependency tree remains reproducible.
npm ciFind the files that define the Apache Fineract API URL, tenant and production configuration.
find src -maxdepth 5 -type f \
\( -name "environment*.ts" -o -name "*.json" \) \
-print | sort
grep -R "baseApiUrl\|apiUrl\|tenantIdentifier" -n src 2>/dev/null | head -80Set the backend hostname, API path, tenant identifier and HTTPS settings required by your deployment.
grep -R "localhost\|8443\|fineract-provider" -n \
src environments* 2>/dev/null | head -100Run the frontend locally and connect it to the verified Apache Fineract backend.
npm startRun the production build after verifying the frontend configuration and backend connection.
npm run buildLocate the generated browser files before copying them to Nginx or packaging them in a Docker image.
find dist -maxdepth 3 -type f | sed -n '1,120p'
du -sh distBackend connection
| Validation area | What to check |
|---|---|
| Backend health | Confirm the Apache Fineract health endpoint responds before testing the Web App. |
| API hostname | Confirm the frontend points to the intended development, staging or production backend. |
| HTTPS | Use valid HTTPS certificates in production and avoid browser mixed-content errors. |
| Tenant | Confirm the configured tenant identifier exists and matches the backend. |
| Authentication | Verify login credentials, authentication mode, roles and permissions. |
| CORS and proxy | Confirm the reverse proxy and backend permit requests from the frontend domain. |
Production hosting
Deploy only the compiled frontend files. Keep the source repository and build tools separate from the public web root.
sudo mkdir -p /var/www/mifos-web-app
sudo chown -R $USER:$USER /var/www/mifos-web-appsudo cp -a dist/. /var/www/mifos-web-app/sudo nano /etc/nginx/sites-available/mifos-web-appsudo ln -s /etc/nginx/sites-available/mifos-web-app \
/etc/nginx/sites-enabled/mifos-web-app
sudo nginx -t
sudo systemctl reload nginxserver {
listen 80;
server_name mifos.example.com;
root /var/www/mifos-web-app;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff|woff2)$ {
expires 7d;
add_header Cache-Control "public";
try_files $uri =404;
}
}Troubleshooting
Confirm the supported Node.js version, delete only node_modules if necessary, and retain the committed package-lock.json.
Check the API URL, tenant identifier, credentials, authentication mode and Apache Fineract logs.
Use a reverse proxy or configure the backend and frontend domains according to the selected deployment architecture.
Ensure both the frontend and Apache Fineract API use HTTPS in production.
Configure Nginx to serve index.html for Angular client-side routes.
Inspect the browser console, asset paths, base href, environment configuration and Nginx document root.
Production readiness