CODEWITHSUNDEEP
reactjsexpressreact-router
Mills
Mills

Reputation: 57

why is my html root blank when using react-router into express locally

I am trying to get two routes working at the moment '/' and 'login' atm just using the same page. However, when I load the page through express and not webpack-dev-sever, I get a blank html page instead of the react-router loading. Not sure where to go from here.

I've seen examples I believe for express to just route directly to the html page, which I do here, I get no errors just a blank html, with 'root' id that it connects the react to.

folder
├── server.js
├── index.js(for final react render)
├── Src
│   ├── public
│   │   ├── index.js(empty html for react)
│   │   
│   │__ components
│   │   
│   │__routes   
│   │  |__index.js(react-routes)
    |
    |__index.js(gathers all components to push to index.js next directory up)

Server.js

const express = require('express');
const path = require('path');

const app = express();
const PORT = process.env.PORT || 3000;


app.get('/**', (req, res) => {
  res.sendFile(path.join(__dirname, '/src/public/index.html'));
});

app.listen(PORT, () => {
  console.log('server has started at:' + PORT);
});

Package.json

{
  "name": "chauffeurus",
  "version": "1.0.0",
  "description": "new repo of previous group project similar to uber website",
  "main": "./index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server",
    "postinstall": "webpack -p",
    "start": "node server.js"
  },
  "keywords": [
    "reactjs",
    "javascript",
    "webpack",
    "mongoose",
    "mongodb"
  ],
  "author": "christian a.",
  "license": "ISC",
  "devDependencies": {
    "webpack-dev-server": "^1.16.2"
  },
  "dependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-latest": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "bcrypt-nodejs": "0.0.3",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.26.0",
    "mongoose": "^4.13.2",
    "passport": "^0.4.0",
    "react": "^15.4.1",
    "react-bootstrap": "^0.31.5",
    "react-dom": "^15.4.1",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^4.0.8",
    "redux": "^3.7.2",
    "webpack": "^1.14.0"
  }
}

Routes index.js

import React from 'react'
import { Homepage } from '../index.js';
import { BrowserRouter, Route } from 'react-router-dom';

export default () => (
  <BrowserRouter>
    <div>
      <Route path="/" exact component={Homepage} />
      <Route path="/login" exact component={Homepage} />
    </div>
  </BrowserRouter>
)

index.js outside of src folder

import React from 'react'
import ReactDOM from 'react-dom';
import { Homepage } from './src/index.js';
import Routes from './src/index.js';

ReactDOM.render(<Routes />, document.getElementById('root'));

Webpack.config.js 

const path = require('path');

//NPM Install that "tells the plugin to add any JavaScript into the bootom of the page...
// just before the closing body tag"
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/public/index.html',
  filename: 'index.html',
  inject: 'body'
})

module.exports = {
  entry: './index.js',
  output: {
    path:  __dirname + './dist',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx?$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.(png|jpg|gif)$/, loader: 'file-loader' }
    ]
  },
  plugins: [HtmlWebpackPluginConfig]
}

Upvotes: 0

Views: 1681

Answers (1)

Dane
Dane

Reputation: 9552

I think the problem is you also need to serve your static assets. Include this line in your server.js:

// Serve static assets
app.use(express.static(path.resolve(__dirname, '..', 'build')));

You have to replace the code with your directories, I think public is the folder in your case ( where the built js files and images reside ).

Upvotes: 1

Related Questions