New site looks empty

[SamSam]

Hello, I have created a new site to try the angular/erpnext combination GitHub - castlecraft/portal_spa

When I first created the spasite, it looks empty like that:

The angular is running fine, but looks the same:

I think I am missing a fundamental step? As if the new site has no erpnext at all?
Note that the erpnext is already installed (on the default site).

[SamSam]

@revant_one Hi, sorry for tagging you, but I was following your instructions to serve an angular app to frappe.

As you see, it’s failing to server the files:

[SamSam]

@revant_one
Hi revant one, sorry for bothering, but I am not working on erpnext full time, it’s a small side project I was assigned to, so I kinda have very little time to dig deeply into docs. I am kinda lost and all this is new to me.

I wanted to ask you, is this the expected result of your angular spa test ? (one page with a Welcome popup)

Also notice the errors in the terminal.

What I did was I downloaded a new VMbox of frappe (develop) and I simply copied your app folder and installed it on the default site (localhost, I didn’t create a new site, was this a wrong thing to do?). and I fixed the proxies to

in proxy.config.json:
{
“/api”:{
“target”: “http://localhost:8000”
},
“/”:{
“target”: “http://localhost:8000”
},
“/login”:{
“target”: “http://localhost:8000”
}
}

and in package.json for the npm start command:
“start”: "ng serve --proxy-config ./proxy-config.json --host ‘localhost’ --port 4200 --deploy-url ‘/portal_spa/’

However I am getting these missing assets errors in terminal, if you can give me a clue what’s that, I would be very grateful.

Thanks

[revant_one]

1. app is old, use nodejs v14 to build
2. app will load on route /portal_spa of your site.

Follow the steps in README using nodejs v14 and the url http://testportalspa.localhost:8000/portal_spa served the app.

I pushed some fixes.

[SamSam]

Hi revant_one, @revant_one

I am trying to achieve a productive environment for development, what I did is the following:

1. Since I am using a Windows machine, I am running erpnext using your develop virtualbox
2. I set a bridge connection between the host (Windows) and the guest (Ubuntu)
3. In my Windows host machine I have my VS Code, I installed ftp-sync extension so I can instantly upload my updated files on saving to my virtualbox image (ubuntu guest).
4. While on the guest, I did bench start in frappe-bench, and in the custom portal spa I run the angular (npm start) which is located in the apps folder (and installed in the default site), I am seeing my changes I am doing in my host on the guest’s firefox by browsing to localhost:4200/portal_spa (inside GUEST).

It’s working fine, it’s taking about some seconds to sync for every change, but is there an easier way for it without using ftp sync?

I have tried to run the angular app in the host while changing the IP in the proxy.config.json and scripts in package.json.
I can browse to erpnext in my host’s browser using :8000/desk…etc just fine, however , when browsing to :4200/portal_spa (In case i run the angular app in host, not in the guest in bench frappe) it is always showing the old files of build, as i it’s like actually showing :8000/portal_spa. I guess this cannot work since it’s not actually located insited frappe-bench folder?

[revant_one]

I don’t have Windows+Virtualbox. I can’t help.