feat(bootstrap): migrate to bootstrap 4

Author: AmitJoki

.bootstraprc

@@ -1,5 +1,5 @@
 {
-  "bootstrapVersion": 3,
+  "bootstrapVersion": 4,
   "preBootstrapCustomizations": "./src/theme/variables.scss",
   "appStyles": "./src/theme/app.scss",
   "loglevel": "disabled",
@@ -9,14 +9,15 @@
         "style-loader?sourceMap",
         "css-loader?sourceMap&importLoaders=2",
         "resolve-url-loader",
+        "postcss-loader?sourceMap",
         "sass-loader?sourceMap"
       ],
       "extractStyles": false
     },
     "production": {
       "styleLoaders": [
-        "style-loader",
         "css-loader?importLoaders=1",
+        "postcss-loader?sourceMap",
         "sass-loader?sourceMap"
       ],
       "extractStyles": true
@@ -36,44 +37,5 @@
     "tab": false,
     "affix": false
   },
-  "styles": {
-    "mixins": true,
-    "normalize": true,
-    "print": true,
-    "glyphicons": true,
-    "scaffolding": true,
-    "type": true,
-    "code": true,
-    "grid": true,
-    "tables": true,
-    "forms": true,
-    "buttons": true,
-    "component-animations": true,
-    "dropdowns": true,
-    "button-groups": true,
-    "input-groups": true,
-    "navs": true,
-    "navbar": true,
-    "breadcrumbs": true,
-    "pagination": true,
-    "pager": true,
-    "labels": true,
-    "badges": true,
-    "jumbotron": true,
-    "thumbnails": true,
-    "alerts": true,
-    "progress-bars": true,
-    "media": true,
-    "list-group": true,
-    "panels": true,
-    "wells": true,
-    "responsive-embed": true,
-    "close": true,
-    "modals": true,
-    "tooltip": true,
-    "popovers": true,
-    "carousel": true,
-    "utilities": true,
-    "responsive-utilities": true
-  }
+  "styles": true
 }

package.json

@@ -61,6 +61,7 @@
     "@feathersjs/socketio-client": "^1.0.1",
     "axios": "^0.18.0",
     "body-parser": "^1.16.1",
+    "bootstrap": "^4.3.1",
     "classnames": "^2.2.5",
     "compression": "^1.6.2",
     "cookie-parser": "^1.4.3",
@@ -87,7 +88,7 @@
     "prop-types": "^15.5.8",
     "qs": "^6.5.2",
     "react": "^16.8.6",
-    "react-bootstrap": "^0.32.1",
+    "react-bootstrap": "^1.0.0-beta.12",
     "react-dom": "^16.8.6",
     "react-final-form": "^4.1.0",
     "react-helmet": "^5.0.3",
@@ -135,8 +136,7 @@
     "babel-jest": "^24.7.1",
     "babel-loader": "^8.0.0",
     "babel-plugin-dynamic-import-node": "^2.2.0",
-    "bootstrap-loader": "^2.1.0",
-    "bootstrap-sass": "^3.3.7",
+    "bootstrap-loader": "^3.0.4",
     "chai": "^4.1.1",
     "clean-webpack-plugin": "^2.0.1",
     "concurrently": "^4.0.1",

src/containers/App/App.js

@@ -6,10 +6,10 @@ import { withRouter } from 'react-router';
 import { renderRoutes } from 'react-router-config';
 import { provideHooks } from 'redial';
 import { IndexLinkContainer, LinkContainer } from 'react-router-bootstrap';
-import Navbar from 'react-bootstrap/lib/Navbar';
-import Nav from 'react-bootstrap/lib/Nav';
-import NavItem from 'react-bootstrap/lib/NavItem';
-import Alert from 'react-bootstrap/lib/Alert';
+import Navbar from 'react-bootstrap/Navbar';
+import Nav from 'react-bootstrap/Nav';
+import Alert from 'react-bootstrap/Alert';
+
 import Helmet from 'react-helmet';
 import qs from 'qs';
 import { isLoaded as isInfoLoaded, load as loadInfo } from 'redux/modules/info';
@@ -100,42 +100,39 @@ class App extends Component {
     return (
       <div className={styles.app}>
         <Helmet {...config.app.head} />
-        <Navbar fixedTop>
-          <Navbar.Header>
-            <Navbar.Brand>
-              <IndexLinkContainer to="/" activeStyle={{ color: '#33e0ff' }} className={styles.title}>
-                <div className={styles.brand}>
-                  <span>{config.app.title}</span>
-                </div>
-              </IndexLinkContainer>
-            </Navbar.Brand>
-            <Navbar.Toggle />
-          </Navbar.Header>
-
-          <Navbar.Collapse>
-            <Nav navbar>
+        <Navbar bg="light">
+          <Navbar.Brand>
+            <IndexLinkContainer to="/" activeStyle={{ color: '#33e0ff' }} className={styles.title}>
+              <div className={styles.brand}>
+                <span>{config.app.title}</span>
+              </div>
+            </IndexLinkContainer>
+          </Navbar.Brand>
+          <Navbar.Toggle aria-controls="basic-navbar-nav" />
+          <Navbar.Collapse id="basic-navbar-nav">
+            <Nav className="mr-auto">
               <LinkContainer to="/chat">
-                <NavItem>Chat</NavItem>
+                <Nav.Link>Chat</Nav.Link>
               </LinkContainer>
               <LinkContainer to="/about">
-                <NavItem>About Us</NavItem>
+                <Nav.Link>About Us</Nav.Link>
               </LinkContainer>
 
               {!user && (
                 <LinkContainer to="/login">
-                  <NavItem>Login</NavItem>
+                  <Nav.Link>Login</Nav.Link>
                 </LinkContainer>
               )}
               {!user && (
                 <LinkContainer to="/register">
-                  <NavItem>Register</NavItem>
+                  <Nav.Link>Register</Nav.Link>
                 </LinkContainer>
               )}
               {user && (
                 <LinkContainer to="/logout">
-                  <NavItem className="logout-link" onClick={this.handleLogout}>
+                  <Nav.Link className="logout-link" onClick={this.handleLogout}>
                     Logout
-                  </NavItem>
+                  </Nav.Link>
                 </LinkContainer>
               )}
             </Nav>
@@ -144,18 +141,17 @@ class App extends Component {
                 <strong>{user.email}</strong>
               </p>
             )}
-            <Nav navbar pullRight>
-              <NavItem
+            <Nav>
+              <Nav.Link
                 target="_blank"
                 title="View on Github"
                 href="https://github.com/bertho-zero/react-redux-universal-hot-example"
               >
                 <i className="fa fa-github" />
-              </NavItem>
+              </Nav.Link>
             </Nav>
           </Navbar.Collapse>
         </Navbar>
-
         <div className={styles.appContent}>
           {notifs.global && (
             <div className="container">

src/theme/variables.scss

@@ -1,4 +1,4 @@
-@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
+@import "~bootstrap/scss/_functions.scss";
 
 /**
  *  Define scss variables here.
@@ -22,5 +22,5 @@ $brand-info: #5bc0de;
 
 $text-color: #333;
 
-$font-size-base: 14px;
+$font-size-base: 0.875rem;
 $font-family-sans-serif: "Helvetica Neue", Helvetica, sans-serif;

webpack/dev.config.js

@@ -191,6 +191,23 @@ const webpackConfig = {
     // hot reload
     new webpack.HotModuleReplacementPlugin(),
 
+    new webpack.ProvidePlugin({
+      Tether: 'tether',
+      'window.Tether': 'tether',
+      Popper: ['popper.js', 'default'],
+      Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
+      Button: 'exports-loader?Button!bootstrap/js/dist/button',
+      Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
+      Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
+      Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
+      Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
+      Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
+      Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
+      Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',
+      Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
+      Util: 'exports-loader?Util!bootstrap/js/dist/util',
+    }),
+
     new webpack.IgnorePlugin(/webpack-stats\.json$/),
 
     new webpack.DefinePlugin({