3

Before, I was able to resolved my webpack issue thanks to this suggestion. However, when I tried to deploy my react app, I am not getting any errors, but got a "Cannot GET /" when I browse to my deployed link. I tried changing the script and even moving my entire project to a public folder. Nothing seems to work for me. What step am I missing in this process?

Here is the directory of my project look like:

|-node_modules
|-public
  |-app
  |-src
  |-webpack.config.js
|-package.json
|-Procfile
|-server.js

The app folder contains my html, css and main.js files. The src folder contains my components. Here is my current package.json file:

{
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "serve": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "5.8.*",
    "babel-loader": "5.3.*",
    "express": "^4.14.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^2.3.0"
  }
}

This is my server.js:

var express = require('express');
var app = express();

app.use(express.static(__dirname + '/public'));

app.listen(process.env.PORT || 8080);

I appreciate the help. Thank you.

Community
  • 1
  • 1
emvo
  • 117
  • 2
  • 11

1 Answers1

1

  • Type heroku logs, that way you can see the errors a bit closely

  • Make sure your Procfile looks like this: web: webpack-dev-server

  • Do you have a routes folder. If not, do this: Create a routes folder, add a file called index.js. Into that file, add:

    var express = require('express');  
    var router = express.Router();

    router.get('/', function(req, res, next) {  
          res.status(200).send("Hi, It works!")  
    });

  • In your server.js file add
    var videos = require('./routes/index');
    app.use('/vids', videos);

  • Test it on local, if goes right then, deploy it again to heroku.

Stefan Falk
  • 23,898
  • 50
  • 191
  • 378
Sebastian S
  • 807
  • 6
  • 15
  • I tried your suggestion and I feel like I am getting closer. First off, in the **scripts**, I had to do: ** "scripts": {"scripts": {"start": "node ./bin/wwwr"}}**. I will get an error if I do ** "scripts": { "start": "node ./bin/www" }**, which I am unsure why that is the case. When I ran `npm start` and browse to **localhost:8080/app**, I see the title of my project, but the rest of the content is not there. I always run `webpack-dev-server` and go to the browser and the content is there. How would I incorporate `webpack-dev-server` in the start up? – emvo Feb 20 '17 at 06:18
  • I see you're using webpack-dev-serve. So, leave your package.json with "scripts": { "serve": "webpack-dev-server"}, this is fine. and start your project as your usually do. (webpack-dev-serve) In your Procfile add: web: webpack-dev-server . Looks this's what your missing. Then deploy again – Sebastian S Feb 20 '17 at 15:53
  • I made adjustment to my Procfile and package.json file and when I tried to deploy it, I got an **Application error** when I browsed to the deployed link. I looked in the logs and got a **Cannot find module 'webpack/bin/config-yargs'**. So, I tried to updating my webpack to `webpack": "2.2.0-rc.3` to see if it was a version issue. After that, the "Application error" was caused by "Entrypoint size exeeds the recommened limit (250kB)" error message according to the logs. Is there anything I can try at this point? – emvo Feb 21 '17 at 03:58
  • Share the repo. that way I can compile, see the whole code and find where the issue quicker. – Sebastian S Feb 26 '17 at 01:33
  • Sure thing. Here is my [repo](https://github.com/evo777/fire-emblem-quiz) – emvo Feb 27 '17 at 19:27