[Solved] Integrate with External Bootstrap Template

Hi all,

I am just trying to integrate Bootstrap Admin Dashboard with ERPNext Website.

I have a dashboard.html page.

but where should i place the .css and .js files coming with external bootstrap templates?

should I create public > css
and public > js directories in my Custom App?


Yes, then create build.json in public directory and add all the css, js files list in build.json to minify the css and js. Then include the minified css, and js in hooks.py. please check the hooks.md.

If the css is for app then include files in app_include_css & app_include_js.
If the css is for website then include files in web_include_css & web_include_js.

Thanks, Makarand

1 Like

I already have .min.js files (downloaded from net)
So still i need to be add the css ,js files in build.json?


Ok Understood… let me try…

In that case, include those files directly in hooks.py.

1 Like


Okay, thank you…
Trying it now…


Thank You, I got the template working fine.
There was jQuery Conflict.
It had to be solved.

can u show us a screenshot what u’ve done? :slight_smile:

Yes sure @robinz
Below is juat 3 tables and aggregate data… we can show any widget like this…


Dear @Amalendu
Many of us in Community looking for this dashboard like thing,if you dont mind just share the procedure you followed to get a dashboad like the above screenshot


this looks fantastic. it would be great if u share your code or procedure.

thanks in advance. cheers


Surely I will share the code @robinz @hereabdulla

1 Like

thanks a lot @Amalendu . eagerly waiting for that

Hi @robinz, @hereabdulla, @ledavidle

I have created the template by

  • Make copy(link) of the ‘public’ folder of my custom app
  • Cut that folder and put it inside sites/assets
  • rename that folder to ‘app name’
  • Create two folders(css and js) inside this folder
  • create/download any bootstrap admin template
  • save it in the www folder of custom app
  • put all js files inside app’s js folder
  • put all css files inside the app’s css folder
  • Correct all the css and js links line of codes in the newly created dashboard.html page
  • do ‘bench build’
  • do ‘bench clear-cache’
  • do ‘bench start’ or serve it any port

Now access the dashboard page.

This is the procedure i followed to create the above page.



@Amalendu Thanks for Sharing…

Thanks for sharing @Amalendu! May I know where can I find a bootstrap admin template like the one you used?

@ wdg You can try



@Amalendu thanks for sharing.

When you mean “put all js files inside app’s js folder” you mean 100% of the js of a admin file?
I ask because the Bootstrap template I have have hundreds of js’s (folder names), two in data, two in dist, one in root, on in js and several other in the “vendor” folder - should I consolidate all of them in the js folder of > frappe-bench > sites > assets.

Thanks a lot.

Hi Amalendu, can you plz guide my how do I integrate my website to the ERP? As the leads may come directly to the ERP.

Thanks in advance!

Hello @Jack1
Can you make it clear plz?