We got a wrap bootstrap theme call ace admin. We are trying to integrate the theme into meteorjs.
The structure of the ace admin files folder is:
assets
avatars
css
fonts
images
img
js
build
demo
files
lib
several javascript files here (*.js)
dist
avatars
css
fonts
images
img
js
By following the tutorial here
I moved all the static content such as images, fonts, etc to client folder, javascript related folders - (assets, build, dist and all the related content) to public folder.
The problem that I am facing it - Meteor is not loading the javascript files inside the public folder.
Could someone help? Thanks.
Edit:
Ok. Finally. Thanks to #Ethaan. After spending almost 2 days figuring out what the problem- its with the javascript loading dependencies. If anyone is facing similar problems - make sure you load all the dependencies first and then load other files.
Do everything in the link provided in the above url that I mentioned and then move all the js folder files to client.
You should know some things about meteor structure, You can read docs
/lib folder its where you put the code you want to share between server/client, code like Routes,Collectios or other code ho is available on server/client(if you put code which use "window" object you will have issues, since windows objects its undefined to the server.)
/publicfolder here is where you put the images, logos, fonts, etc (you get the idea)
/client folder here is where you put the code which will be available only to the client
/server here is where you put the code only available on the server
I recommend you to read the docs, this was just a quickly explanation.
Related
In Shiny, how can I link to an image or a css file that is not in the www folder of the app?
The situation is that I have several apps that share common code, but need to be treated as distinct apps. At the same time I want them to be styled similarly and therefore I want to link to images and css files that are not specific for the app.
The only way I know of linking to images and css files is to place them inside a folder called www in the app directory. But that means that each app will need a copy of the files, because each app has its own www folder.
When running an app I've noticed that Shiny itself links to files in a subfolder called shared/ but I have not yet found where that folder is located. Can I put my custom files there too?
Symlinking from the www folder to a common place comes to mind, but I'd rather not to have to do that. I'm also aware that I can include css styles inline in the html, but that's another thing I want to avoid.
After much searching I finally ran into addResourcePath.
It worked like a charm when added before the shinyApp call.
I've recently switched from PHP to JS Meteor+ReactJS. I've started my first project and almost instantly got a bump in the road.
I cannot seem to get image in my scss file to work. Same with trying to get to it via url in my browser. In the browser I get flow-router error about missing path. Scss doesn't give me any errors just doesn't work.
I've tried every possible link variation I've found online.
absolute_path, relative_path, {}absolute_path, {}relative_path, even just putting the image in the same directory as the scss and linking to it in the same directory. Nothing seems to work.
I'd greatly appreciate any help.
Put images and other shared content for the client in your project's public directory. public gets mapped to / so you can refer to them with <img src='/images/mypicture.png'>
If you want an images directory then put them in public/images and refer to them as <img src='/images/mypicture.png'>
My less style sheets are located in my /public folder for now. I'm trying implement them on my meteor app but to no avail.
This is the error I get:
The stylesheets are located in the /less folder, which is inside the public folder, so the URL should be correct. By the way, all those files that are in the screenshot above are files that import dozens of other variables located deeper in the folder.
I also checked and I have the latest version of less installed. Any help would be appreciated.
The public folder isn't the right place to store the files. Files stored in a “public” folder are served to visitors. These are files like images, favicons, and the “robots.txt” file. So they get served 'as-is', not processed by LESS and served as CSS.
More about Meteor folder conventions.
After discussion in the comments, it seems something is not working right in your less compiler, the less file should not be in the public folder, as already mentioned, and you should not need to include it with a script tag. You can follow these steps to create a new app and test less and see if you can find a difference between this and your current app.
Create a new meteor project
meteor create test
Add less
cd test
meteor add less
Start your server
meteor
add a file sytles.less to the top level folder with this...
.fun {
color: red;
}
Update the test.html file to add the fun class to the text output...
<div class="fun"><p>You've pressed the button {{counter}} times.</p></div>
Load the page, the text should pick up the class and become red. No link to the styles.less file needed. You can try moving it around to different folders, it worked fine from client for me as well. Look around and see what else might be different.
If you still have issues, try providing more information on how the project is set up.
I'm importing a external web template I found in bootstrap to build a intro page. It has it's own js, css , html files.
However I found it is troublesome to transfer the beautiful external web to meteor format by hand. How you deal it smartly?
Now I only can figure out that replacing the html() when the intro is created. (although I still don't know how to do it exactly )
Template.intro.onCreated(function(){
$('html').html('the external code');
});
The simple and dirty way is to put all js, css, and html into public\ directory of your meteor app since this directoy is served "as is"
After that you can start converting your js files (taking into account local and global namespaces) and convert html files into Handlebars templates. Converted files you should move to client folder. Css files you can put in client folder to allow its minification and remove references to css files from Handlebars templates of html pages.
/public folder is usually used for static files like images. I suggest putting everything in a client folder. Usually there will be a lot of redundant js files coming with the template (bootstrap, jquery, fontawesome, etc). Best thing to do is use http://atmospherejs.com/ packages for those libraries and you will most likely be left with the templatename.js file which deals with the html within that template which you'll have to "meteorise"
In my webdesign process i use jade, sass, coffe etc. to generate static files via a GruntJS watch task into a dev folder. And most of the times after the build process is done, a cms comes along and want some templates to work. Thats usually html files with some php/ruby/python tags in it. Let´s say it´s a Wordpress Theme.
The Problem is:
i have to modify my generated files in the dev folder directly
when im modifing my source jade, html, coffee - files, the dev folder would be overwritten
if i clone the static files and move them into the theme folder, i have to apply manually every change i made to the src/dev folder to the cloned theme template files.
that´s very odd. So i´am in need of a grunt task that maybe...
generate the templates for me out of the static files (via a json mapping file)
generate the templates directly from the src files via special attributes, comments or something similar
There´s just one thread i found where the user tries to accomplish the same with jsdom.
Can someone help me to find a existing tool that accomplish such a task or do i have to build it on my own?
Thanks, Robert
Check out grunt-usemin
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views)