App always in production, webpack dev server never used

Kaldrogh commented 7 years ago

Whatever i do, when i use yarn start and yarn dev:wds, the terminal is outputing "Server running on port 8000 (production)", webpack dev server is running fine on port 7000 but the files are served from localhost:8000/static/js/bundle.js and sourcemap doesn't seem to work. The app won't refresh by itslef because it is not listening on webpack dev server port.

I've checked multiple times my files and everything is correct.

Package.json

{
  "name": "js-stack-boilerplate",
  "version": "1.0.0",
  "description": "A nice stack for javascript development",
  "main": "index.js",
  "browserslist": ["> 1%"],
  "scripts": {
    "start": "yarn dev:start",
    "dev:start": "nodemon -e js,jsx --ignore lib --ignore dist --exec babel-node src/server",
    "dev:wds": "webpack-dev-server --progress",
    "prod:build": "rimraf lib dist && babel src -d lib --ignore .test.js && cross-env NODE_ENV=production webpack -p --progress",
    "prod:start": "cross-env NODE_ENV=production pm2 start lib/server && pm2 logs",
    "prod:stop": "pm2 delete server",
    "lint": "eslint src webpack.config.babel.js --ext .js,.jsx",
    "test": "yarn lint && flow && jest --coverage",
    "precommit": "yarn test",
    "prepush": "yarn test && yarn prod:build"
  },
  "author": "Kaldrogh",
  "license": "MIT",
  "devDependencies": {
    "babel-cli": "^6.24.0",
    "babel-core": "^6.24.0",
    "babel-eslint": "^7.1.1",
    "babel-jest": "^19.0.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-flow-react-proptypes": "^0.21.0",
    "babel-preset-env": "^1.2.2",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.23.0",
    "cross-env": "^3.2.4",
    "eslint": "^3.18.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-compat": "^1.0.2",
    "eslint-plugin-flowtype": "^2.30.3",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.9.0",
    "flow-bin": "^0.42.0",
    "husky": "^0.13.2",
    "jest": "^19.0.2",
    "nodemon": "^1.11.0",
    "pm2": "^2.4.2",
    "rimraf": "^2.6.1",
    "webpack": "^2.2.1",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "babel-polyfill": "^6.23.0",
    "compression": "^1.6.2",
    "express": "^4.15.2",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-hot-loader": "^3.0.0-beta.6"
  }
}

render-app.js

// @flow

import { APP_CONTAINER_CLASS, STATIC_PATH, WDS_PORT } from '../shared/config'
import { isProd } from '../shared/util'

const renderApp = (title: string) =>
`<!doctype html>
<html>
  <head>
    <title>${title}</title>
    <link rel="stylesheet" href="${STATIC_PATH}/css/style.css">
  </head>
  <body>
    <div class="${APP_CONTAINER_CLASS}"></div>
    <script src="${isProd ? STATIC_PATH : `http://localhost:${WDS_PORT}/dist`}/js/bundle.js"></script>
  </body>
</html>
`

export default renderApp

config.js


// @flow

export const WEB_PORT = process.env.PORT || 8000
export const WDS_PORT = 7000
export const STATIC_PATH = '/static'

export const APP_NAME = 'Hello App!'

export const APP_CONTAINER_CLASS = 'js-app'
export const APP_CONTAINER_SELECTOR = `.${APP_CONTAINER_CLASS}`

server/index.js

// @flow

import compression from 'compression'
import express from 'express'

import { APP_NAME, STATIC_PATH, WEB_PORT } from '../shared/config'
import { isProd } from '../shared/util'
import renderApp from './render-app'

const app = express()

app.use(compression())
app.use(STATIC_PATH, express.static('dist'))
app.use(STATIC_PATH, express.static('public'))

app.get('/', (req, res) => {
  res.send(renderApp(APP_NAME))
})

app.listen(WEB_PORT, () => {
  // eslint-disable-next-line no-console
  console.log(`Server running on port ${WEB_PORT} ${isProd ? '(production)' : '(development).\nKeep "yarn dev:wds" running in an other terminal'}.`)
})

Thanks for helping me out.

verekia commented 7 years ago

Seems like the issue comes from the your process.env.NODE_ENV environment variable. Do you always set it to production in your bash_profile / bashrc or something?

Run node in a terminal to open the prompt, and type process.env.NODE_ENV. What does it return? It should be undefined, or even development. Yours is probably production because of some global configuration you might have.

goldylucks commented 7 years ago

just for security sake, can you post your 'isProd' function, or better yet the entire utils file?

Also try to clone the repo and checkout that branch, and c if u run into the same issue. If not, the problem is in your code.

If so, it's somewhere else.

Kaldrogh commented 7 years ago

When i check the value of NODE_ENV while nodemon and webpack dev server are not running, i get this result :

conemu64_2017-03-20_09-10-47

When i fire up both of them with yarn start and yarn web:wds, this is what i get :

Nodemon :

nodemon

Webpack dev server :

webpack

process.env.NODE_ENV :

atom_2017-03-20_09-14-34

Console panel on Chrome :

console

Source panel :

source

utils.js :

// @flow

// eslint-disable-next-line import/prefer-default-export
export const isProd = process.env.NODE_ENV === 'production'

verekia commented 7 years ago

Like @goldylucks said, clone / download this folder, I think that's the chapter you're at :

https://github.com/verekia/js-stack-walkthrough/tree/master/05-redux-immutable-fetch

Run yarn (don't forget that one), and yarn start / yarn dev:wds in it. Do you get the same issue?

Kaldrogh commented 7 years ago

When i clone your repo, retrieve node modules and launch both nodemon and webpack dev server, it works perfectly. Altough, i can't figure out what was the problem with my setup... I've checked everything again and again... Pretty strange.

Thank you for your help both of you.

verekia commented 7 years ago

There has to be something that you missed, or a typo somewhere :) Copy paste all the files one by one until you find the difference! Closing the issue then.

verekia / js-stack-from-scratch

App always in production, webpack dev server never used #171