Incorporating 3rd party admin template to Phoenix 1.4 project

Phoenix Forum Questions / Help
, ,
1

I recently came across this theme on Bootstrap Dash: Corona Bootstrap Admin Template | BootstrapDash and would like to incorporate it in my next Phoenix 1.4 project. I have not done this before and was wondering how to go about doing it?

It comes with folders for: css, fonts, gulp-tasks, images, js, pages, partials, scss, vendors,as well as a gulpfile.js.

Also, will it be problematic if Gulp is used in phoenix?

If anyone can guide me through this I would greatly appreciate it :innocent:

Thanks

2

Phoenix is just the webserver, it doesn’t control what you put on the page itself. :slight_smile:

By default the modern phoenix generators come with webpack definition files setup to make it easy to setup all the javascript/css/images/etc… but even that is optional. However, assuming you are using the normal modern template generator then you’d just integrate it with webpack the same as any other webpack thing, not specific to phoenix whatsoever and lots of docs on the Internet about it. :slight_smile:

3

I do not know if it is an option, but I would use the Vue template, build whatever there and then connect to the phoenix app using REST

4

It depends a lot on how good the template author has done their job but generally I copy the precompiled css file instead of the scss files.

For the JS I ignore their venders/third party scripts directory and use npm modules as I need them so check their scripts and often they’ll have a demo.js or something like that which shows off everything. Ignore that and look for what it includes as the base js file. Copy that file to your project and require it from your app.js and if you need one of the thirdparty vendor scripts npm install it and require it from that script instead.

fonts/images go in assets/static. The rest you don’t need to copy over.

2 Likes