CODEWITHSUNDEEP
jquerynode.jsexpresscordovasocket.io
Anmol Vashisht
Anmol Vashisht

Reputation: 23

How to separate node js frontend code from backend code?

Problem :

I am fairly new to node js and find it extremely difficult to separate the frontend from the backend. (I don't fully understand the concepts).

Why ?

I need to convert my web app to a Hybrid app using Apache Cordova.

Specific Case Code :

index.html :

<!doctype html>
<html>
  <head>
    <title>Socket.IO chat</title>
    <style>
      * { margin: 0; padding: 0; box-sizing: border-box; }
      body { font: 13px Helvetica, Arial; }
      form { background: #000; padding: 3px; position: fixed; bottom: 0; width: 100%; }
      form input { border: 0; padding: 10px; width: 90%; margin-right: 0.5%; }
      form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; }
      #messages { list-style-type: none; margin: 0; padding: 0; }
      #messages li { padding: 5px 10px; }
      #messages li:nth-child(odd) { background: #eee; }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <input id="m" autocomplete="off" /><button>Send</button>
    </form>


    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>

      window.prompt('Name ?');
      $('#messages').append($('<li>').text('You joined !'));

  $(function () {
    var socket = io();
    $('form').submit(function(e){
      e.preventDefault(); // prevents page reloading
      socket.emit('chat message', $('#m').val());
      $('#m').val('');
      return false;
    });
    socket.on('chat message', function(msg){
      $('#messages').append($('<li>').text(msg));
    });
  });
    </script>
  </body>
</html>

index.js :

var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  socket.on('chat message', (msg) => {
      io.emit('chat message', msg);
  });
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });
  socket.on('chat message', (msg) => {
      console.log('message: ' + msg);
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});

I am including package.json dependencies so that you can also, try to fix it :

  "dependencies": {
    "express": "^4.17.1",
    "socket.io": "^2.3.0"
  },

What I tried :

• Searched all GitHub and StackOverflow forums.
• Tried to seperate code myself.
• That's it.

Upvotes: 2

Views: 686

Answers (1)

shy1992
shy1992

Reputation: 104

The frontend is basically the html file(s) which will be send to the user. It contains all visuals and is basically a gateway to speak with your backend. In your case it the index.html

The backend processes all incoming http-requests of the user. In your case it handles the socketio requests send by the client. It is the place to perform business logic and to interact with your database.

They could be treated as different projects because they operate on different Layers. The presentation layer and Business-Logic/appication layer. But in the endproduct they are related because the server need to send the html files to the client and the http-requests must match on the server and client side.

Nodejs and the express are a great way to build RESTful Webservices which are just a way to retrieve raw data without any presentation-logic in it. It is the frontends responsibility to display the data accordingly.

Upvotes: 2

Related Questions