DEV Community

Creating a Node app with React, Webpack 4, Babel 7, Express and Sass

Kedar on May 10, 2019

🏁 Prologue 🆕 Make a new directory. Let's call it react-boilerplate. mkdir react-boilerplate And cd into it. cd react-boilerplate Mak...

Read full post

danielle-dlfs • Jun 21 '19

Big thanks to you and this tutorial :) really helped me!

Just saying, I had an small issue doing 3.3 React + Express.
I don't know if it's because of my node/express/react.. version but in the server/index.js file, I had to add const path = require('path'); so that the path is defined.

And everything is working now :D

Here are my (dev)Dependencies:

"dependencies": {
    "express": "^4.17.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.35.0",
    "webpack-cli": "^3.3.4"
  }

and the node version : v12.4.0

Kedar • Jun 21 '19 • Edited

I am very glad that this article helped you. :)
You are so right. I dont know how I missed that. I do have the path defined in my project code. Not sure how I did not copy it over.
I will edit the article to include it.
Thanks again :)

Andrea Betti • Jun 29 '19

Great article!

What should I edit if I want to associate other URLs to other .js files? For example, localhost:3000/test would load a test.js component...

Kedar • Jun 29 '19

Thanks Andrea.

If you want to do exactly that (i.e. pointing /test to the test.js file),
in the file server/index.js, add:

app.get('/test', (req, res) => {
  res.sendFile('path-to-the-file');
});

Make sure the Express JS version you are using (in package.json), is 4.8.0 or higher. Or else, sendFile wont be supported.

If you need that because you need the .js files for your code and dont need to expose it publically, I would recommend to let webpack take care of it.

Andrea Betti • Jun 29 '19

I'm sorry, maybe I wasn't clear: what I would like to do is render the content of another component (for example a component Test, located in test.js, and indipendent from Index) inside the div in index.html (or if possible, another html file called test.html).

Writing what you said in your reply, the result is the whole code inside test.js.

Randal Vance Cunanan • May 12 '19

Thank you, I was looking for this kind of tutorial last week but using Vue instead.

Kedar • May 13 '19

You're welcome.
Hope it helps.

bharath • Jan 27 '21

Wow this is a great article. It gave a good intro to everything I needed in one single article. Thanks a lot

Артём Погурский • Dec 16 '19

Thank you so much!!!

Didin 👨‍💻 • May 18 '20

I think you can combine Express JS and dbdesigner.id as your database designer. This can make your project readable and clear documentation.

Zeeshan Zakariya • Jul 7 '20

You might want to move express.static statement below all the routing calls.

in express the order matters. app.get calls wont get called if the static call serves the get request

Ronny • Apr 10 '20

Wow!! Amazing. :)
It works well.

Anupam Maurya • May 17 '19

well, explanatory article, good covering all parts especially the src/components and every index.js one!

ckcnair • Jul 18 '19 • Edited

What a great way of explaining things! keep it up.
can we use it with react-router? any configuration changes needed?

Kedar • Jul 18 '19

Thanks ckcnair.
react-router is a package that provides core routing functionality. Of course, you can use it. Like many other packages.
Configurations will be needed. It depends on the way you'd like to use it.

barocsi • Jul 27 '19

So much tooling for so little business value.