CODEWITHSUNDEEP
javascriptnode.jsreactjswebpackwebpack-dev-server
suyesh
suyesh

Reputation: 659

Restful api in node for react application

I want to create restful api in node for the react application. In my application i am using webpack, babel and react js. So the entry point of the package.json is index.js(that is output of the webpack). So i am not able to understand how to create a restful api in the same project using node. Codes are here.

webpack.config.js

var config = {
   entry: './main.js',

   output: {
      path:'./',
      filename: 'index.js',
   },

   devServer: {
      inline: true,
      port: 8080
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

package.json

{
  "name": "reactmmpl",
  "version": "1.0.0",
  "description": "mmpl implementation with react js",
  "main": "index.js",
  "scripts": {
    "test": "testmmpl",
    "start": "webpack-dev-server --hot"
  },
  "keywords": [
    "mmpl",
    "meritain",
    "mobile"
  ],
  "author": "suyesh",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "express": "^4.14.0",
    "react": "^15.3.0",
    "react-dom": "^15.3.0",
    "react-router": "^2.6.1",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1"
  }
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import Login from "./lib/Login.jsx";


ReactDOM.render((
   <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {Login} />
      </Route>
   </Router>

), document.getElementById('app'));

App.jsx

import React from 'react';
import Header from "./lib/Header.jsx";




class App extends React.Component {
   render() {
      return (
         <div>
            <div className="main-container" id="loginPage">
                <Header/>
                {this.props.children}
            </div>
         </div>
      );
   }
}



export default App;

index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
      <link rel="stylesheet" type="text/css" href="/public/css/headerFooter.css" />
      <link rel="stylesheet" type="text/css" href="/public/css/content.css" />
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

Upvotes: 0

Views: 1563

Answers (3)

Žarko Selak
Žarko Selak

Reputation: 1131

You can run two servers, one with webpack-dev-server for client app and for api. So lets say you have your express server on port 3000 and client app server on 9000 all you need to do is to proxy requests like this.

import webpack from 'webpack';
import WebpackDevServer from 'webpack-dev-server';
import config from '../webpack.config.dev.js';

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  contentBase: 'public/',
  hot: true,
  inline: true,
  quiet: false,
  historyApiFallback: true,
  proxy: {
    '*' : 'http://localhost:3000'
  }
}).listen(9000, 'localhost', (err, result) => {
  if (err) {
    return console.log(err);
  }
  console.log('Listening at http://localhost:9000/');
});

so this is example from one of mine projects, this is 'middleware' file for development build. With this setup if your api route looks like this http://localhost:3000/api/users your ajax url to get users will be just /users

eg.

fetch('/api/users', optionsObject);

Upvotes: 1

Derrick
Derrick

Reputation: 1606

From the client side code, AJAX would be used to make the RESTful API Calls. There is a nice lib that takes some of the ugliness out of AGAX:

https://github.com/visionmedia/superagent

Even if sharing a lot of the same code, you're probably going to have separate entrypoints for the server side vs client side. The Express framework will be setup in your server side code. A good example of setting this up is in the below boilerplate:

Here is a good example showing client server interaction: https://github.com/erikras/react-redux-universal-hot-example

Upvotes: 0

FredWe
FredWe

Reputation: 11

You have 2 options to implement RESTful APIs :

  1. Front-end option : using a front-end library like react-router

  2. Back-end option : directly write your expected response in your framework, for example, in express

Upvotes: 0

Related Questions