Currently to require a javascript template file, I put the file in app/assets/javascripts/templates, and include a line like this in a javascript file:
// = require templates/cool_thing.jst
And then I access the template in my javascript like this:
JST['templates/cool_thing']
This works fine, of course, but it requires having my templates put in a subdirectory of the assets/javascript folder. Templates are a large part of my project and I'd really like them to have their own space.
Ideally, I'd love to have my rails 3 assets folder organized like this:
- Assets
- javascripts
- templates
- stylesheets
And then require the templates like thus:
// = require templates/cool_thing.jst
And access them in javascript like this:
JST['cool_thing']
Is this possible, and if so how is it done?
Add this to your application.rb config:
config.assets.paths << File.join(Rails.root, 'app', 'assets', 'templates')
Related
i am currently working in a Nuxt.js project and i'm trying the Pre Rendering option. I would like to change the format name of the files created when i launch nuxt generate... but i don't really now if this is even possible.
If my pages folder has these 2 componentes:
pages\
- page1.vue
- page2.vue
the default situation is that my dist folder will have these files after the generate command:
dist\
- page1
- index.html
- page2
- index.html
Would be possible to have this structure?:
dist\
- page1.html
- page2.html
I've tried to create my own router.js with my custom paths, using #nuxtjs/router module and it works in dev mode, but when i try to generate the static files, there are no errors... but it doesn't work. No page files in dist folder.
Perhaps i'm missing something, or perhaps it is not possible to do this, but... has anyone faced this situation?
Add generate.subFolders false in your nuxt config:
generate: {
subFolders: false
}
I am working on an MPA with Vue and codeigniter. I have the following architecture:
-htdocs(root)
- application
- src
- views
- models
- controllers
I work with my frontend basically in the src directory and the others are codeigniter MVC model directories. What I am doing is configuring the webpack to build directly in the views directory so that my codeigniter can consume the generated htmls, configured as follows: (in this case I set it up in the vue.config.js file
)
outputDir: './views'
Up to this point everything works fine, wepback does the bundles and generates all the necessary files inside my views directory.The problem now is that the path to the files is the root of the project. Then he tries to fetch the files like this:
<link rel="preaload" href="/css/chunk-common.45fe69c2.css" as="style">
So that it points to the correct path (application/views) I made the following configuration in the vue.config.js:
assetsDir: './views'
But now when he is going to do the build I have the following warning and the files bundle is not completed.
Does anyone know why this happens?
Assuming you want to access static assets under the base URL http://example.com/application/views/..., you'll want to set the publicPath property in your config
// vue.config.js
module.exports = {
outputDir: 'views',
publicPath: '/application/views/',
// ...
}
FYI, if you ever do want to use assetsDir, don't prefix it with ./
A directory (relative to outputDir) to nest generated static assets (js, css, img, fonts) under.
An example would be
assetsDir: 'assets'
which would dump files in views/assets/css, views/assets/js, etc.
I am creating a rails engine inside a rails app. I have a test.js file in rails app and I want to include this file in my rails engine's application.js file.
My engine is in vendor/engines folder.
How can I include wrapper(main) app's assets file into engine?
I am new for rails engine. If I miss something please let me know.
If I am getting you right then you want some DRY code for using same js file in different places.
Rails starts looking from the root directory. So you just need to require the js file same as you did in application.js.
For example
//= require test
I have read and tried the Assets Pipeline guide here:
http://guides.rubyonrails.org/asset_pipeline.html
... which shows how to include specific files in a manually created and updated list, --OR-- the Proc which includes a directory (or directories) but then excludes all the other files which Rails ordinarily includes.
I want to += my folder of files to the normally included files.
I have tried the answers:
Rails config.assets.precompile setting to process all CSS and JS files in app/assets
What is the purpose of config.assets.precompile?
rails config.assets.precompile for specific sub folder
... the last of which appears to show a solution:
config.assets.precompile += ["*external/calendars*"]
which I changed to:
config.assets.precompile += %w["*javascript*"]
or
config.assets.precompile += ["javascript"]
(and about 20 other variations.)
... to get my assets/javascript folder. But the directory is not included, as evidenced by the error "...isn't precompiled."
The third method, is to give it
config.assets.precompile += %w( *.js )
... which works, but leads to a very, very long compile, I would assume finding every JS file it can discover, anywhere.
Needless to say, adding files to a manually updated list is not suitable for an in-progress application - and losing whatever unknown things Rails precompiles with an exclusionary Proc won't cut it either (yet those are the only two examples in the docs).
Is there not a simple wildcard solution to "+-=" a folder - or perhaps to just turn this 'feature' off, specify my JS per view, and still have it work on Heroku?
----EDIT - It gets more irrational the deeper I look.
Essentially, the solution is, "Load all the things Rails finds A-OK in Development Mode." And yet such an option does not exist?
The production.rb file, referring to the precompile line, says:
# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
... and application.js has:
//= require_tree .
... so that should load all the files under that directory - but it doesn't. Why? The deeper I dig, the less sense this makes.
A good practice when dealing with multiple CSS/JS files to add to the asset pipeline is to simply create a new manifest for those files:
Let's say you have some JS files under lib/assets/javascripts/external/calendars and you want to load them through the asset pipeline.
You want to create an index.js manifest file with the following content:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require_tree .
This way all JS files you add into the external/calendars directory will be included by default thanks to the require_tree . directive.
Now, in your app/assets/javascripts/application.js file add the following line:
//= require calendars
This should find your "calendars' manifest index file" and load all dependent JS files. No need to add anything into the asset pipeline, it will just work.
I would like to include PIE.htc in my Rails application to make CSS3 easier for IE. I can't seem to figure out how to include the PIE.htc file.
I tried to include PIE.htc in my assets folder as well as assets/stylesheets folder, but I no routes matching error.
How do I include PIE.htc with rails asset pipeline?
Try the solution in this post: Using PIE.htc in rails
Basically, it should be:
behavior: url(/assets/PIE.htc);
Also, if you want to be completely sure that the PIE.htc file is being loaded, open it and add an alert as so:
<script type="text/javascript">
alert("PIE works);
If the file if being loaded, a popup should appear showing the message.