Brand new 8.0.1 app with Bootstrap does not work

I created a new app in a devcontainer using rails-new -u 3.3.5 -r 8.0.1 dummy2_project --devcontainer --css bootstrap followed by cd dummy2_project and code . Then I started up the devcontainer, ran bin/setup then bin/dev. Which failed due to

09:07:03 css.1 | started with pid 26275 09:07:03 css.1 | yarn run v1.22.22 09:07:03 css.1 | error Command “build:css” not found.

Which then causes bin/dev to abort.

The Procfile has this line yarn build:css which has no matching entry in package.json, which is why it failed

I can run bin/rails s, and get the basic Rails page up. But when I add a home page and set the root to be the home page then I get an error.

Showing /workspaces/dummy2_project/app/views/layouts/application.html.erb where line #23 raised:

The asset 'application.css' was not found in the load path.

Now there are at least two parts to the problem.

  1. I need to find out what have to add to the configuration to get `yarn build:css’ working.
  2. I need to find out how to amend the setup for --css bootstrap so that it just works without spending hours on Stackoverflow, discuss.rubyonrails.org & so on.

This error breaks the “Rails way”, which is that setting up a new app should be quick and painless. I’m guessing this hasn’t had much testing.

Once I find a solution, I’ll look at modifying the setup code so that others won’t have this problem in future.

Any idea what the solution might be?

It’s an open issue with rails-new:

Looks like you’ll need to install node and yarn manually for now.

Cheers

Is this true?

  • If you’re using rails-new, check the documentation or source of this command. It is not part of the standard Rails toolchain and might be provided by a specific package, script, or internal tooling in your environment.
  • rails new is the official Rails command, and its behavior is documented in Rails guides.

I get the same error.

App was created via JetBrains RubyMine with the following command (line breaks added here for readability):

/bin/bash -c "env RBENV_VERSION=3.4.1 \
/home/chris/.rbenv/libexec/rbenv exec rails _8.0.1_ \
new /home/chris/src/syncthing/rails/test --skip \
--database=sqlite3 --css bootstrap"

I am working on Fedora 40 with latest updates installed.

The full error is

12:29:21 web.1  | ActionView::Template::Error (The asset 'application.css' was not found in the load path.)
12:29:21 web.1  | Caused by: Propshaft::MissingAssetError (The asset 'application.css' was not found in the load path.)
12:29:21 web.1  | 
12:29:21 web.1  | Information for: ActionView::Template::Error (The asset 'application.css' was not found in the load path.):
12:29:21 web.1  |     20:     <%# Includes all stylesheet files in app/assets/stylesheets %>
12:29:21 web.1  |     21:     <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
12:29:21 web.1  |     22:     <%= javascript_importmap_tags %>
12:29:21 web.1  |     23:     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
12:29:21 web.1  |     24:   </head>
12:29:21 web.1  |     25: 
12:29:21 web.1  |     26:   <body>
12:29:21 web.1  |   
12:29:21 web.1  | app/views/layouts/application.html.erb:23
12:29:21 web.1  | 
12:29:21 web.1  | Information for cause: Propshaft::MissingAssetError (The asset 'application.css' was not found in the load path.):

Server is running via bin/dev. Strangely enough I had to install foreman manually, because the OOTB code seemed to not do it. But that is a different matter …

In my case I could solve the issue by installing yarn and running the command bin/rails css:install:bootstrap

For whatever reason it seems that there is no check if yarn works or is even installed, and then things silently fail. At least what it looks like on my environment.

Here is the list of things that you need to have installed so that could work:

  • node
  • npm install --global yarn
  • npm install --global nodemon
1 Like

I found a better way to do things. Don’t use rails new with bootstrap. Just download bootstrap.css and put it in app/assets/stylesheets. In /layouts/application.html.haml (or erb) I added

%link{:href => "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css", :rel => "stylesheet"}
    %script{src: "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js", integrity:"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz", crossorigin: "anonymous"}

And it all works.

As I’m not overriding anything in bootstrap.css then I’ve no need for a build process to deal with scss.

However for one project it only half works and I can’t understand why. Some of the Bootstrap things like h1 elements don’t display the right size and the standard navbar doesn’t work.

Do you get any errors in your browser’s console when the navbar doesn’t work? Is your application.html.erb set up in the manner that BS requires, structurally speaking? Are you including the JS in the page head, or at the before </body> level (either is usually okay, but there may be a Turbo interaction that comes into play when the JS is in the head).

More details will help diagnose the specific issue you see. Also, are you looking at this on localhost or on a server somewhere? A link to the latter would also help with diagnosis. Put something throwaway on fly.io http://fly.io/ for the few minutes it might take someone to get more details.

Walter

This got things working for me. Thanks.

1 Like

In the end I gave up and created a brand new application, copied the code across and it worked perfectly. I’m still mystified and if I ever get a chance to go back and dig into it I will but for now I’ve got a solution and need to get some work done