CODEWITHSUNDEEP
ruby-on-railsreactjstwitter-bootstrapheroku
Gotey
Gotey

Reputation: 629

Bootstrap styling not showing when deploying to heroku a RoR application with React

I am using Ruby on Rails with React and I am deploying to Heroku. I have been here already and the responses are not helping me. In my application.html.erb file I have

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"> </script>
    <%= javascript_pack_tag 'Index' %>
  </head>

And I am importing bootstrap as well in the main component:

import React from 'react';
import { render } from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import { createStore} from 'redux';
import { Provider } from 'react-redux';
import App from '../components/App';
import rootReducer from '../reducers';


const store = createStore(rootReducer, { }, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

document.addEventListener('DOMContentLoaded', () => {
  render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.body.appendChild(document.createElement('div')),
  );
});

When deploying to Heroku only the bootstrap classes are not being styled, although they are showing as classes in the DOM. No errors are showing developer tools.

Upvotes: 2

Views: 1130

Answers (3)

Azeez Ibrahim
Azeez Ibrahim

Reputation: 23

I resolved this issue by adding the bootstrap link to my

app/views/layouts/application.html.erb

<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" %>.

The link is for bootstrap 5. I hope that works for you too

Upvotes: 1

Redvan
Redvan

Reputation: 56

The problem is the assets pipeline in rails 6 with Webpacker try the following it should make it work:

Step 1:

yarn add [email protected] jquery popper.js

Step 2: in config/webpack/environment.js add the following:

const { environment } = require('@rails/webpacker')

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment

Step 3: in app/javascript/packs/application.js add the following:

import 'bootstrap'
import './src/application.scss'

step 4: create the following folder app/javascript/packs/src and create the file application.scss and place @import '~bootstrap/scss/bootstrap';

This should fix the problem and configure Rails 6 with Webpack for production.

Upvotes: 4

AFOC
AFOC

Reputation: 844

If you are coding the link into your layout don't import it, and vice versa. I'd say leave the link up and cut it from the component & make sure nothing else is sneakily importing duplicates anywhere else.

A surefire way to get it working is to save it to your /assets/stylesheets directory and make sure your application.css.scss file is importing it either through *= require_tree . or by name, if you didn't mind sacrificing the potential caching benefit of having the cdn serve it.

Upvotes: 1

Related Questions