added basename to router

- this enables the app to be hosted from a subdomain in production

src/components/navbar.js

@@ -1,12 +1,10 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { Navbar, Nav, NavDropdown, FormControl, Form, Button } from 'react-bootstrap'
-import {LinkContainer} from 'react-router-bootstrap'
 import { NavLink } from 'react-router-dom'
 
 const MainNav = (props) => {
-  const {episodes, captions} = props
+  const { episodes } = props
-
   return (
     <Navbar bg="dark" variant="dark" expand="lg">
       <Navbar.Brand href="/">Anarchy Planet</Navbar.Brand>
@@ -20,7 +18,7 @@ const MainNav = (props) => {
               </NavLink>
             )}
           </NavDropdown>
-          <Nav.Link href="/audio">Player</Nav.Link>
+          <NavLink className="navbar-nav" to="/audio">Player</NavLink>
         </Nav>
 
         <Form inline>

src/history.js

@@ -2,6 +2,8 @@ const createHistory = require('history').createBrowserHistory
 const createMemoryHistory = require('history').createMemoryHistory
 
 const history =
-  process.env.NODE_ENV === 'test' ? createMemoryHistory() : createHistory()
+  process.env.NODE_ENV === 'test'
+    ? createMemoryHistory()
+    : createHistory()
 
 export default history

src/index.js

@@ -1,15 +1,14 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'
-import {Router} from 'react-router-dom'
+import { BrowserRouter as Router } from 'react-router-dom'
 import history from './history'
 import store from './store'
 import App from './app'
 
-
 ReactDOM.render(
   <Provider store={store}>
-    <Router history={history}>
+    <Router basename="/waveform" history={history}>
       <App />
     </Router>
   </Provider>,

src/routes.js

@@ -4,26 +4,28 @@ import {connect} from 'react-redux'
 import { Episodes } from './components/episodes'
 import { Captions } from './components/captions'
 import Audio from './components/waveform'
-import Main from './components'
+import { Main, Navbar } from './components'
-class Routes extends Component {
+import { Login, Signup } from './components/auth-form'
-  componentDidMount() {
+
-  }
+const Routes = () => {
-  render() {
   return (
     <div>
-        <Route exact path="/" component = {Main} />
+      <Route path="/login" component={Login} />
-        <Route path="/episodes" component={Episodes} />
+      <Route path="/signup" component={Signup} />
-        <Route path="/captions/:slug" component={Captions} />
+      <Route path='/navbar' component={Navbar} />
-        <Route path="/audio" component={Audio} />
+      <Route exact path='/' component={Main} />
+      <Route path='/episodes' component={Episodes} />
+      <Route path='/captions/:slug' component={Captions} />
+      <Route path='/audio' component={Audio} />
     </div>
   )
-  }
+
 }
 
 const mapState = state => {
   return {
     episodes: state.episodes,
-    captions: state.captions
+    captions: state.captions,
   }
 }
 

webpack.config.js

@@ -3,6 +3,10 @@ const path = require('path')
 
 module.exports = {
   entry: ['@babel/polyfill', './src/index.js'],
+  output: {
+    path: path.resolve(__dirname, '/dist'),
+    filename: 'bundle.js',
+  },
   module: {
     rules: [
       {
@@ -15,10 +19,6 @@ module.exports = {
   resolve: {
     extensions: ['*', '.js', '.jsx'],
   },
-  output: {
-    path: __dirname + '/dist',
-    filename: 'bundle.js',
-  },
   plugins: [new webpack.HotModuleReplacementPlugin()],
   devServer: {
     contentBase: path.join(__dirname, 'dist'),