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...
Collapse
 
danielledlfs profile image
danielle-dlfs

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

Collapse
 
kedar9 profile image
Kedar • 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 :)

Collapse
 
snorlite profile image
Andrea Betti

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...

Collapse
 
kedar9 profile image
Kedar

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.

Collapse
 
snorlite profile image
Andrea Betti

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.

Collapse
 
randalvance profile image
Randal Vance Cunanan

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

Collapse
 
kedar9 profile image
Kedar

You're welcome.
Hope it helps.

Collapse
 
bvsbrk profile image
bharath

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

Collapse
 
treuh profile image
Артём Погурский

Thank you so much!!!

Collapse
 
didin1453fatih profile image
Didin 👨‍💻

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

Collapse
 
darkraken007 profile image
Zeeshan Zakariya

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

Collapse
 
handy117 profile image
Ronny

Wow!! Amazing. :)
It works well.

Collapse
 
anupammaurya profile image
Anupam Maurya

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

Collapse
 
ckcnair profile image
ckcnair • Edited

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

Collapse
 
kedar9 profile image
Kedar

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.

Collapse
 
barocsi profile image
barocsi

So much tooling for so little business value.