Add Single Page Application to website portal page

revant_one · November 5, 2019, 8:32am

My approach:

www/portal_page/* is dist.
build a “dist” using any JS framework
place index.html in www/portal_page/
edit index.html to link appropriate asset files served from public/js public/css
place js in public/js, place css in public/css
add a build.json, just a stub to symlink the directory and make assets available

Example repo (example frappe app + angular app)

serve bench site http://testportalspa.localhost:8000
serve angular which proxies to bench for seamless development
run build script to build dist, copy files and does bench build
http://testportalspa.localhost:4200/portal_spa/ serves the www/portal_spa

check README for more.

igrekus · November 5, 2019, 8:38am

Thanks!

This link is somewhat relevant: How to import Vue components?

revant_one · September 15, 2020, 2:35pm

github.com

castlecraft/portal_spa/blob/master/portal_spa/public/build.json

{
    "css/styles.css": ["public/css/style.css"],
    "js/main-es5.js": ["public/js/main-es5.js"],
    "js/polyfills-es5.js": ["public/js/polyfills-es5.js"],
    "js/runtime-es5.js": ["public/js/runtime-es5.js"]
}

revant_one · October 27, 2021, 7:35am

Update

VamYip · June 25, 2022, 7:02am

Is something available for AngularJS? I’m trying to add an Angular App to an internal page.

GopiG · March 15, 2023, 2:01pm

The ng build --prod build not reflected in frappe …Can you help me out to resolve this?(The frappe port always loading old files not updated files means Angular dist build files)