Full-Stack React & Node.js - Create the server
Tags: node, javascript, react, webdev
Published: 2022-06-27 16:27:09

---
series: Simply Learn Full-Stack React & Node.js
---

First create a folder **node-server** at the same level as folder **react-client**

Inside the **node-server** folder, use a shell/CLI to enter this command to create a **package.json** file:

```shell
npm init -y
```

> The `-y` flag means that **package.json** will be filled with defaults. You can edit the file later to add your name and repository details, etc.

Next run this to install some dependencies:

```shell
npm i -S express body-parser cors morgan
```

> `i` is shorthand for **install**
> `-S` is shorthand for **-save**

Create **index.js** and paste in this code:

```javascript
const express = require('express');
const cors = require('cors');
const morganLogger = require('morgan');
const bodyParser = require('body-parser');

const env = process.env.NODE_ENV || 'development';
const app = express();

if (env === 'development') {
  app.use(cors());
}

app.use(morganLogger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

// 404 route not found!
app.use(function (req, res, next) {
  const error = 'Here be dragons. Route not found';
  console.info(`404 error! ${error}`)
  res.status(404).send(error);
});

const port = 4011;

app.listen({port}, async () => {
  const baseUrl = `http://localhost:${port}`;

  console.log(`Server running at: \t @ ${baseUrl}/`);
});
```

I will briefly explain the packages we are importing.

**express** is the web framework.

The **cors** package disables "cross origin resource sharing", where origin is a URL and resources are assets like images. The purpose of the **cors** policy is to prevent a website from pointing their image links to a different site and stealing hosting costs. In development we allow cors because we run both the React client and the Node server on one machine, each in their own process (live you could deploy both to the same folder and avoid cors issues). The port numbers on the server and client URL's are needed so the traffic (HTTP requests and responses) can be sent to the correct process. Port numbers are included in the browser decision on the **origin** of the server response 

> Your browser sees the website is on port 3000 but it attempts to fetch data from port 4011.  Even though they both run on localhost, because the port numbers are different, to a browser they are different websites entirely! If we didn't disable cors, this request would violate the **same-origin** policy and be denied!

**body-parser** is middleware that parses incoming requests to extract data for us, in this case json (it also includes a few other parsers that can be useful).

**morgan** is a middleware request logger. In this case we pipe all messages to the console (you could instead write to a file). This is one of the most essential things to include in any node server. For troubleshooting and debugging, seeing all requests logged to your console is pure gold!

> You might notice our server returns no data, has no routes defined, but has a 404 handler. I always add a 404 handler first! When your app grows and has complex routing, getting a clear message, a "final destination" for unmatched routes is essential for development and debugging.

Next edit **package.json**, and change the "scripts" section to add an additional line:

```json
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

Finally you should be able to run your Node.js server with this command:

```shell
npm run start
```

> Run this in the same folder as the **package.json** file

When the console outputs a message saying the server is running, paste this URL into a browser: "http://localhost:4011/"

You should see a text message: "Here be dragons. Route not found"

This is good. We received an HTTP 404 error, which is what we expect as, currently, our server returns no data and has no routing paths defined.

You now have a working client and server. [Next ](https://dev.to/neohed/full-stack-react-nodejs-4-get-data-from-server-3m8h)we will return some data.

Code repo: [Github Repository](https://github.com/neohed/node-react-stack)