Devlog

Let's build React with Express Server

, ,

If you are the first React, please search create-react-app, see other posts.

Building React Service manually without create-react-app is somewhat difficult for beginners.

I will build React via npm package manager. It needs node so if you don’t have then please download in here.

1. To create node project

First of all, you should make the directory for using your react project. 

1
2
3
... > mkdir my_react_express
... > cd my_react_express
.../my_react_express >

when you want to make node project, you just use command below.

1
.../my_react_express > npm init -y

if you don’t use the option ‘-y’ then you should treat the detail of your new node project.

and you can check package.json file in your project directory.

2. To install express, react, react-dom at dependecies

follow below command at your folder

1
.../my_react_express > npm install -save express react react-dom

You can see node_modules folder in your react directory.
and you can also check the new addition, associated with express, react, react-dom at dependencies of package.json

3. To install @babel/core, @babel/preset-env, @babel/preset-react, babel-loader, webpack, webpack-cli at devDependecies

follow command below at your folder

1
.../my_react_express > npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli

and then Let’s check your package.json file one more.

devDependencies entry has been added to package.json file, and what is installed in it.

4. Let’s consist all files, folders properly to your React directory.

First, Let’s make 3 folders in your React directory.

follow command below.

1
2
3
.../my_react_express > mkdir public
.../my_react_express > mkdir server
.../my_react_express > mkdir src

next step, make 6 files in your React directory.

1
2
3
4
5
6
.../my_react_express/webpack.config.js
.../my_react_express/.babelrc
.../my_react_express/public/index.html
.../my_react_express/src/App.js
.../my_react_express/src/index.js
.../my_react_express/server/main.js

5. Let’s fill in your new files.

…/my_react_express/webpack.config.js

typing code below in your webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
    entry: [
        './src/index.js'
    ],

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            } 
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },

    output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
    }
};

One of the important features of webpack is gathering static files and resources together and then extract what to bundle.js

…/my_react_express/.babelrc

1
2
3
{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

…/my_react_express/public/index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
 
    <head>
        <meta charset="UTF-8">
        <title>React App</title>
    </head>
 
    <body>
        <div id="root"></div>
        <script src="/bundle.js"></script>
    </body>
 
</html>

…/my_react_express/src/App.js

1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
 
class App extends React.Component {
    render(){
 
        return (
            <h1>Hello React Skeleton</h1>
        );
    }
}
 
export default App;

…/my_react_express/src/index.js

1
2
3
4
5
6
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
 
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);

…/my_react_express/server/main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
var express = require('express')
var app = express()
var path = require('path')

app.use(express.static('public'))

app.listen(3000, function() {
    console.log("start! express server on port 3000")
})

app.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, "../public/index.html"))
})

6. Update new code your package.json file

please add new code below in your scripts of package.json

1
2
"start": "nodemon ./server/main.js",
"build": "webpack -p"

The below is all the code in package.json 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
    "name": "my_react_express",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        /////////////////////////////////////////////////////// START NEW CODE
        "start": "nodemon ./server/main.js",
        "build": "webpack -p"
        /////////////////////////////////////////////////////// END NEW CODE
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "express": "^4.16.4",
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
    },
    "devDependencies": {
        "@babel/core": "^7.4.3",
        "@babel/preset-env": "^7.4.3",
        "@babel/preset-react": "^7.0.0",
        "webpack": "^4.30.0",
        "webpack-cli": "^3.3.1"
    }
}

if you don’t do thing above, you can’t execute your React

7. Run your React using npm script

follow code below

1
.../my_react_express > npm run build

as I mentioned before, if you finished, you can get a bundle.js file.

1
.../my_react_express > npm start

Finally, Let’s go to localhost:3000

Thank you for reading so far.

Share