Razzle: Created default app not working

[jmsofarelli]

I have tried to create a new Razzle application but it's not starting properly:
I have done

npx create-razzle-app capsules-renderer
cd capsules-renderer
yarn start

And I get the following message:

yarn run v1.13.0
$ razzle start
 WAIT  Compiling...

✔ Client
  Compiled successfully in 2.87s

✔ Server
  Compiled successfully in 281.35ms

ℹ ｢wds｣: Project is running at http://localhost:3001/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /Users/jefferson/workspace-capsule/capsules-renderer
ℹ ｢wds｣: 404s will fallback to /index.html
Warning: Please use `require("react-router-dom").Route` instead of `require("react-router-dom/Route")`. Support for the latter will be removed in the next major release.
Warning: Please use `require("react-router-dom").Switch` instead of `require("react-router-dom/Switch")`. Support for the latter will be removed in the next major release.
✅  Server-side HMR Enabled!
🚀 started

I didn't change anything in the project but and it's using port 3001 instead of 3000 (nothing is running on port 3000).
Also, webpack output is server from undefined ???
I am using node v12.14.1

[cristii]

I had the same issue but I managed to get the project to start. Here's what I did:

1. upgrade node version to v13.6.0
2. re-initialize the app with npx create-razzle-app
3. fix the warnings: https://github.com/jaredpalmer/razzle/issues/1022#issuecomment-498003244
4. run yarn start and open http://localhost:3000/

Hope this helps.

[jmsofarelli]

Hi Cristi,

Unfortunately the problem was not resolved.
Except the warnings that were fixed with #1022, everything else keeps the same:

ℹ ｢wds｣: Project is running at http://localhost:3001/
ℹ ｢wds｣: webpack output is served from undefined

Two things that I did not mention:

1. When I access http://localhost:3001, the response is Cannot GET / (I don't understand why the port here is 3001 and not the default 3000)
2. I am using Node Version Manager on MacOS. This should not be a problem, as all my other tools (like create-react-app, next.js, etc) work perfectly. So I guess the problem is related with some environment variable used by Razzle, but I could not figure it out.

Thanks

[cristii]

Even though in console it says

Project is running at http://localhost:3001/

The app runs on the port that you set in server.listen() in index.js. The default is 3000.

It seems that the message in the console is from webpack-dev-server for the client bundle. I think the port for that is set here: https://github.com/jaredpalmer/razzle/blob/master/packages/razzle/scripts/start.js#L80

[gregmodshow]

I'm also having the same issue

[aforty]

Same here. Webpack dev server not running means development hot reloading isn't working.

[jeco123]

Hi guys, i got the same error, resulting also in an incorrect server side rendering when disabling javascript

[NickCarducci]

@elliottjro
With this, create razzle-app seems to work locally after using this code from example with-now-v2 using express in index.js && publicly after also using same now.json from with-now-v2 example
[edit: When I applied my full UI it seem to have broken css state, http may be needed, hold on
got this from now

]
````
[remove] import http from 'http';
import express from 'express';
let app = require('./server').default;
[remove] const server = http.createServer(app);

[remove] let currentApp = app;
[remove] server.listen(process.env.PORT || 3000, error => {
[remove] if (error) {
[remove] console.log(error);
[remove] }

[remove] console.log('🚀 started');
[remove] });
if (module.hot) {
console.log('✅ Server-side HMR Enabled!');

module.hot.accept('./server', () => {
console.log('🔁 HMR Reloading ./server...');

try {
  app = require('./server').default;

  [remove] server.removeListener('request', currentApp);
  [remove] server.on('request', app);
  [remove] currentApp = app;

} catch (error) {
  console.error(error);
}

});
}

const port = process.env.PORT || 3000;

export default express()
.use((req, res) => app.handle(req, res))
.listen(port, function(err) {
if (err) {
console.error(err);
return;
}
console.log(> Started on port ${port});
});

````

[fivethreeo]

Fixed in next branch