Porting a commercial bootstrap/html template to phoenix framework

I bring my fraustration over to you guys. I’m new to elixir/phoenix and I’ve taken a voluntary project in order to motivate me to learn these technologies. I’ve purchased a commercial html5/bootstrap charity template from theme forest which I’m trying to use as the base for my project. The structure of the template is:

root
|_css(folder)
|_js(folder)
|_images(folder)
|_fonts(folder)
|_ a bunch of html files (One for each sample page)

The template runs fine as advertised ( ie: all the pages and functionality are as advertised). I have tried many times to replace the default phoenix app created to use this template. So far it never quite works. Either, the image slider on the homepage does not work (images don’t scroll, just displayed vertically one on top of another), a preloader fails to give way to image slider after set time (just highjacks the home page and stays there, or some images/graphics cannot be found or some javascript function cannot be found.

I believe I do the right thing copying the files and folders over as required in the phoenix documentation. The following is what I do:

I copied the css files to web/static/vendor/css except style.css which is template specific so I copy that to web/static/css. The javascript files are also copied to web/statci/vendor/js except style.js which is copied to web/static/js. The fonts and images folders are copied over to web/static/assets.

I make no changes to brunch-config.js however I copy the index.html file from the template to web/template/layout/ renaming it as app.html.eex. I then proceed to replace all the stylesheet links with only one html <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>"> and all the various javascrpt links are also replaced by <script src="<%= static_path(@conn, "/js/app.js") %>"></script>. I also empty the phoenix.css file because, the template already comes with jquery.js, bootstrap.min.js and all the css and js files requied for it it work.

My understanding is that everything in web/static is either moved or compiled to priv/static which is actually where phoenix serves static resources from.

After all these, I’m still unable to get the template to work. I’ll be very grateful if someone with the experience can help. My last resort is just to host the template with the raw html files as is, however, the website will require a backend database for some of its other functionality.

1 Like

First of all if that template has multiple CSS files (especially if it includes bootstraps itself) then they may need to be put in a certain order, adjust the brunch-config.js to specify the order with a section like (this is mine for an example):

exports.config = {
  files: {
    stylesheets: {
      joinTo: "css/app.css",
      order: {
        before: [
          "dist/css/tether.min.css",
          "dist/css/bootstrap.min.css",
          "dist/css/bootstrap-select.min.css",
          "dist/material.min.css",
          "dist/material.blue-light_blue.min.css",
          "iconfont/material-icons.css"
        ],
        after: [
          "web/static/css/app.css" // concat app.css last
        ]

Also, no need to put any css in vendor, could put it all in the css that way it gets munged together and compressed properly at release.

Javascript probably has a similar issue, if they are vendor bits then they may need to be attached in a proper order, although if they follow ES6 or such standards properly then order would not matter, however you would need to initiate their code via however they do it (if no initiation is required then they obviously do not follow the various javascript packaging systems, so vendor would be required then, also good luck, that kind of javascript sucks).

Basically the template css should go in your web/static/css, if more than one then set the order based on how they did the order manually. Their javascript, if well made and uses ES5 or ES6 style modules should go in your web/static/js and call their constructors via your app.js, if not well made then should go in web/static/vendor and make sure to set the concat order for the vendor JS in brunch-build.js and hope (I’ve not had good experiences with vendor JS to date, modular I demand now…).

4 Likes

Thanks for your response. I followed it religiously and I’m thrilled to report that I have the template hooked up with phoenix. I can now concentrate on the actual application. Sweet :joy:

5 Likes

Woot! Thanks for the follow-up! :smiley:

1 Like

Hello. @OvermindDL1 I have searched the forums for css, and you are all over these questions. Thank you for taking the time to help out.

I have a follow-up questions. Let’s say the template requires normalize.css. There’s an NPM package for this. I did npm install --save normalize.css@3.0.3 (so that I could get the right version), which downloads the css file into node_modules. I then followed the directions on the Phoenix Guides and added the following to my brunch-config.js file:

  npm: {
    enabled: true,
    styles: {
      normalize: ['node_modules/normalize.css/normalize.css']
    }
  }

For some reason that never worked. I’m resorting to just putting the css file in web/static/css, but should that have worked?

Thanks for any replies.

1 Like

What is the folder structure of normalize?

Have you tried normalize: ['normalize.css']? My rationale is based on.

Brunch can also handle styles of client-side libraries, by providing styles attribute which is key-value object where key is package name and value is an array with relative to package path of styles which should be included.

From Brunch - ultra-fast HTML5 build tool

My understanding is that your config is looking in node_modules/normalize.css/node_modules/normalize.css/normalize.css which probably doesn’t exist

Edit: super weird. You might have to do 'normalize.css': ['normalize.css']

1 Like

Heh, I’ve been face-deep in CSS for months now… ^.^; Always glad to help though!

At the very least you’d need 'normalize.css': for the key since it is the package name, and that file should be fine if it is in the root of that package.

1 Like

@voughtdq / @OvermindDL1 thank you both. I didn’t realize that the key was meant to reflect the folder within node_modules. :grinning:

2 Likes