6

I have a very simple node.js API

Structure:

| project-name
|  public
|     index.html
|     ... some static js/css
|  app.js
|  package.json

app.js

var express = require('express'),
  bodyParser = require('body-parser'),
  http = require('http');

var app = module.exports = express();
app.set('port', process.env.PORT || 8000);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(express.static(path.join(__dirname, 'public')));

app.route('/api/projects').get(...).post(...)
app.route('/api/sales').get(...).post(...)

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

// Starting express server
http.createServer(app).listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port'));
});

Run server - node app.js

Notice: It's a learning project, not for production. I just want to figure out how it all work together.

And now I want to add ReactJS to this project (actualy to public/index.html). But I still want to use app.js to run server with it's api, with the same port.

I know how to make "production build" (compile all jsx to js and use as simple scripts). My questions is only about dev server.

I want:

  • To run a server (api) and client (reactjs) with only one command (node app.js or nodemon app.js etc)
  • To have an auto-reload after script changes (seems nodemon can do it)
2
  • 1
    I suggest you to look at this post. It pretty much explains everything you are trying to learn. Commented Sep 6, 2017 at 19:17
  • @bennygenel thanks! great article Commented Sep 8, 2017 at 16:43

2 Answers 2

1

To make both run with single command you can add command like:

"start": "cross-env NODE_ENV=development npm run webpack --env.browser && cross-env NODE_ENV=development npm run webpack -- --env.server && NODE_ENV=development node compiled/server.dev.js",

Then run command npm run start

And to watch all the directory changes you should add directory name in nodemon.json file like:

{
    "verbose": false,
    "watch": [
      "app/utils",
      "app/routes.jsx",
      "server",
      "webpack"
    ],
    "exec": "npm run start && node server.dev.js"
}
Sign up to request clarification or add additional context in comments.

Comments

0

Installing React in plain HTML (quick way, dev mode only)

This is not the solution for a production, however, it will do for the first tests - just include react and babel (for JSX) to your index.html

// index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="/client/app.jsx" type="text/babel"></script>

and now you can try react:

// app.jsx
var App = React.createClass({
  render: function() {
    return (
      <div className="app">
      Hello, world!
      </div>
    );
  }
});

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

but in this case you can't use packages installed through npm (can't use import XXX from "YYY"; construction), you have to include them via <script> tag (like react and react-dom above)

Installing React using NodeJs (CLI)

In this way you run frontend and backend separately, but keep files together.

Express and React files sit on the same machine, and Express does double duty: it serves the React files, and it also serves API requests.

https://daveceddia.com/create-react-app-express-production/

To install React using CLI, you also need NodeJS to install.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.