Hello,
I want to use an already designed HTML template (a dashboard admin template).
When I was doing server side rendering with another framework, I just had to copy paste the file and change the hrefs for the resources and everything was working.
But with meteor, I tried it and it doesn’t work, I didn’t change the hrefs and copied the assets in the public/ folder.
Also, since I’m very bad at front end, is it the correct way to integrate an HTML template ? What do you suggest ?
Thank you.
Could you give examples of where you put files and how you are referencing them?
Example
File Structure:
public/
logo.png
Code:
<img src="/logo.png" alt="logo" />
Sorry I didn’t explain very well my problem.
So, I have an already done HTML front end with all the css files and js files.
I paste all the js and css files into the client folder.
I paste the HTML code into one template :
if I keep the css and scripts include tags, it works, the page is well rendered.
if I remove the includes, I juste have plain text.
I heard that meteor minifies all the css and js files into one file (for each). In this case, why it doesn’t work anymore when I remove the includes tags ?
Also, since I have already installed the bootstrap smart package, why the style is not applied since they have the same class names ?
I really don’t understand how to integrate an already existing front end with meteor and all the mess with the css files + the smart packages.
Yes, that’s right. All your js and css inside client/ will be minified into one blob. Usually when I want to quickly convert an existing “HTML template” I chuck the main css inside client/ and the rest of the includes (js, images, fonts) into public/ and keep the includes.
I’m actually a bit stumped as to why it is happening based on what you wrote.
Is there any chance you could explicitly list out your file structure and where those files are located, what packages you have installed, etc. A GitHub repo would be great to look at.
It’s really hard to solve your problem without many details.
Here is the project : https://github.com/skini26/TelemetryDashboard
Here’s one template that uses the HTML code from the ‘‘admin template’’ : https://github.com/skini26/TelemetryDashboard/blob/master/client/templates/statboxes/motorTempStatBox.html
Here are the js files that came with the template : https://github.com/skini26/TelemetryDashboard/tree/master/client/lib/dashboard
Here are the css, images and fonts that came with the template :
Thank you !
I think your project is a little bit too scattered. But I didn’t find any links to stylesheets in your templates, nor did I see any CSS files in your client/ folder. You can either link to a stylesheet (located in your public/ folder or otherwise) in your header/layout template, or you can include a stylesheet inside the client/ folder and it’ll automatically be applied to your templates. Have a look at the pull request I made.
Hello Hellstad, thank you very much.
Now I understand that I either have to put it in public and include style.css in the layout or just put it in client and it will be included automagically if I understood what you mean.
Yup, you got it exactly! Glad I could help!
I have one more little question for you 
(since you already saw my code) :
I have some icons that come from css class that are not displayed but I included all the css files.
Also, there are some .less files in the template I have but I cant compile them with meteor (I added less), it says : compile error : .xxx not defined for a lot of variables. This is not my code, it came from a template and the template demo works well.
Also, the less files are not linked in the original HTML page and it works. (Like I said Im very bad at front end haha, so maybe Im saying bs haha).
Last : I tried to add jqxwidgets, and added a simple gauge in Template.tempGauge.rendered like their documentation shows, but it doesnt want to render but I can render it with the same code in a simple html page with a script.
Sorry if some questions are not precise, Im new to meteor and to the front end. I always did JEE backend so this is all new for me.
Thanks again.
If you have icons/images not showing up you probably just need to fix the links. I’m not sure about your less problem, does the template not come with compiled css? I’m finding it hard to assist you since the project is quite large and full of many minified files, and you aren’t being specific enough. I really suggest you try to start over without trying to integrate some existing template as it can get very messy - instead try to use bootstrap as a starting point and add stuff to it as needed. This way I think you’ll have an easier time figuring out how things work on the frontend 
Haha alright, I have other small projects where I do everything from scratch. This one is quite messy as you said.
But I fixed it, the css was taking the icons from the font/ folder, I moved it to public so it can be accessed with the same path.
Have a nice day 