I created a rails 7 app with the following template:
rails new
-d postgresql
-j webpack
-m https://raw.githubusercontent.com/lewagon/rails-templates/master/devise.rb
CHANGE_THIS_TO_YOUR_RAILS_APP_NAME
everything is working fine, but once I wanted to add a boostrap Modal I noticed that my javascript isn't loading into the application.html.erb. I can't even simply console.log("hello"), which confuses me. This is what my application.html.erb looks like:
Application.html.erb
This is what my File structure looks like including application.js
File structure and application.js
I tried channging the java script tags in application.html.erb, tried reinstalling webpack, tried a different template, but can't seem to get it to work. I would be greatful for any tips
Related
Upgrading an existing React project from Rails 4 to 5.1 and loading assets with the new Webpacker pack_tag system. Things seem to compile correctly, I've got a pack file packs/mutts.jsx and in my index.html.erb I reference with
<%= javascript_pack_tag 'mutts' %>
<%= stylesheet_pack_tag 'mutts' %>
When the server runs, this results in 4 files compiled to app/public/packs/: a .js, .js.map, .css and .css.map - all with [packname]-[hash].extension format.
When I inspect the html generated from the pack_tags, I can see they each link to the corresponding js and css files, with the correct hash in the filename. And looking at the Network tab in devtools, both files load successfully with 200.
But when I look at the Sources tab, I see at localhost:3000 there is a packs/ directory that only contains the js file, and the css is nowhere in sight, and styles are definitely not being applied to the page.
Am I getting the file structure or importing wrong or something? Doesn't seem to be a webpack config issue, as the contents of the compiled file look correct.
The problem was where I placed the stylesheet_pack_tag. After placing it in the <head> it worked.
Should have caught this - most of the demos for Webpacker have the tag placed right with the relevant javascript_pack_tag, but in my case I'm rendering a new JS root per page, so the js pack is rendered by a rails view that's not the root application.html.erb
I've seen some webpacker examples that seemed to be going for "keep assets in proximity of concerned code", but I'm happy just chucking global styles in the head here.
I am migrating my rails application to phoenix framework.
I added some javascript (say some.js) and css files to web/static/js and web/static/css dir.
<%= static_path(#conn, "/js/some.js") %> in the front page page/index.html.eexdidn't work. It raised the exception (dev env):
Phoenix.Router.NoRouteError at GET /static/js/some.js
no route found for GET /static/js/some.js (VisualTrader.Router)
If I copied some.js to priv/static/js dir, it worked. So what I missed? I thought the assets pipeline worked like the one in rails, which auto precompiled resources.
Below list my phoenix framework environments:
Elixir version
elixir -v
Erlang/OTP 18 [erts-7.1] [source] [64-bit] [smp:4:4] [async-threads:10] [hipe] [kernel-poll:false]
Elixir 1.3.0-dev (187f4f8)
Phoenix version
defp deps do
[{:phoenix, "~> 1.1.2"},
...
If you want to include the Javascript File to be precompiled you'd need to add the following line of code.
Add your Javascript file in web/static/js directory.
In web/static/js/app.js include your file
import "./some-file"
I'm trying to add a js file which is part of a purchased theme to my rails project.
In my assets.rb file I have
Rails.application.config.assets.precompile += %w(mvpready-core.js)
In my application.js I have
// This is a manifest file that'll be compiled into application.
//= require mvpready-core
//= require_tree .
At the end of my user.html.erb I have
<%= javascript_include_tag "application" %>
But when I load the page console gives me the error
ReferenceError: mvpready_core is not defined
What am I doing wrong and how can I debug this?
I dont think you need to tell anything to the assets.rb file.
The proper way of integrating a purchased theme is to put the required assets files in the vendor folder of your rails project directory. The vendor folder is specially for the third party plugins such as bootstrap. So what you need to do is as follows:
STEP 1:
Copy and paste the necessary JS and CSS files into the particular folders of the assets inside vendor folder.
STEP 2:
Require those files in to the project's manifest file i.e application.js and application.css files.
You can find manifest files here:
app -> assets -> javascripts -> application.js and app -> assets -> stylesheets -> application.css
Let me help you understand a little bit more. Ruby on Rails has some magick that goes on in the background where you do not need to add anything to
assets.rb
once you have setup your new project all you need to do is put the javascript file into:
/app/assets/javascripts/mvpread-core.js
When you start the rails server it will autoload anything you have in following directories:
/app/assets/javascripts/mvpread-core.js
/app/assets/images/mvpread-core.png
/app/assets/stylesheets/mvpread-core.css
Now if the javascript has path's in it linking to images, other javascripts, and other stylesheets you will need to search through the source code and make sure that it is looking for the file in this url path structure:
/assets{javascripts|images|stylesheets}
Also as #Taylor Galeser asked did you put the file in /app/assets/javascripts ?
This is all a very overly simplistic explanation on what Ruby on Rails does automatically for you but it should help you get what is going on behind the scenes better.
I am using the latest Bootstrap v3.1.1 Sass.
Within the .zip file, I get
lib, tasks, templates, test and vendor.
I ignored everything and only use the vendor > assets folder.
The assets folder has all the fonts, stylesheets and javascripts I need.
I have gotten the file structure setup properly.
However when I am trying to import .js files from the javascript folder, I am having a bit of a problem.
Unlike the bootstrap.scss file that comes along. I can just uncomment the _.scss file that I need and it will work.
Within the bootstrap.js file, it contains some syntax that I haven't seen before. After a bit of Google, it says 'require' is a nodejs syntax.
I uncommented a few and try to see if they work. However it fails. the .js file I got back is exactly like the above screenshot. It doesn't concatenate modal.js, tooltip.js and popover.js. I did abit of Google, it says I need to have RequireJs?
I'm working on a Rails 4.0 app with following directory structure
-app
|->javascript
|->page-specific
|->myjavasript.js
In my application.css I have removed required tree directive to make sure I don't include all js on every page.
//= require_tree .
Now to include my javasript I used following syntax on my page:
The application works fine on my development environment but when I push my changes to my production environment, I get 404 when I browser make a call to get javascript.
I call made in production is:
server-name/javascripts/page_specific/myjavasript.js
I call made in develop machine is:
server-name/assets/page_specific/myjavasript.js?body=1
I read a bit about asset pipelines and added following to my production.rb:
config.assets.precompile += ['page_specific/myjavasript.js']
But still my public\assets folder doesn't contain myjavasript.js, and keep on getting a 404.
I have a couple of questions, I do I add page specific (not-cpntroller specific) assets to my app?
Why is it working on development and not in production, what is done differently?
How can I fix it?
In firebug I see:
"NetworkError: 404 Not Found - https://my-server/javascripts/page_specific/myjavasript.js"
Just try,
config.assets.precompile += ["page-specific/*"]
Then, open up rails console and run the below line to know whether page-specific folder is there under your app asset paths:
Rails.application.config.assets.paths
Hope it helps :)