Link Index.Html Client.Js and Server.Js

Link index.html client.js and server.js

The browser (because you have <script src="/client.js">) makes a request for /client.js

The server:

Gets the request
Runs response
Reads index.html
Sends it to the browser

Since index.html starts with <, the browser throws an error when it tries to run it as JavaScript.

Why are you giving the browser index.html when it asks for client.js?

You need to examine the request object, determine what URL is being asked for, write logic to return the correct resource with the correct status code and the correct content-type, and then return that to the client.

The Node.js documentation has an example of this but you should probably stop trying to use createServer directly — since it involves a massive amount of wheel reinvention — switch to using Express and work through the (very short) getting started guide which includes a section on using the static module to serve up static files.

How to link a server.js file with a client.js file using socket.io library?

Cross-Origin Request Blocked

From the documentation:

Since Socket.IO v3, you need to explicitly enable Cross-Origin Resource Sharing (CORS).

const io = require("socket.io")(httpServer, {
    cors: {    
        origin: "https://example.com",    
        methods: ["GET", "POST"] 
     }
});

Another error message shows up on localhost:3000

Well. Yes. The server running on port 3000 is set up to serve up socket.io and only socket.io. You've done nothing to tell it do serve up something when the client asks for / so it gives you a Not Found error.

How do you serve client/index.html from server/app.js?

There is a node build-in module that deals with resolving path, which might help you with this issue

The function path.resolve will deal with the relative part (/../) and build an absolute path for you.

For example:

var path = require('path');
var clientFile = path.resolve(__dirname + '/../client/index.html');

See more info on the documentation on path http://devdocs.io/node/path#path_path_resolve_from_to

Initialize the server.js then within the HTML page call a function from a Javascript file

So I managed to solve my problem after modifying the server.js file folder. Here is my updated project file architecture with the updated server.js code.

PROJECT ARCHITECTURE

Sample Image

SERVER.JS CODE

const express = require('express');
const app = express();

// THIS LINE WAS THE SOLUTION TO THE PROBLEM
app.use(express.static('./public'));

app.get('/', (req, res) =>{
    res.setHeader('Content-type', 'text/html');
    res.sendFile('./public/index.html');
});

app.listen(8080, () =>{
    console.log('APPLICATION INITIALIZED....');
});

INDEX.HTML CODE

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>StarNotary DAPP Front End</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  </head>
  <style>
    input {
      display: block;
      margin-bottom: 12px;
    }
  </style>
  <body>
    <h1>StarNotary DAPP</h1>
    <h3 id='name'>Star Name: </h3>
    <hr>
    <h3 id='owner'>Star Owner: </h3>
    <hr>
    <h3>Claim Star</h3>
    <hr>
    <h3>TEST</h3>
    <button id="test" onclick="letMeCallYou()">Testing External Javascript library</button>
    <script src='./scripts/app.js'></script>
  </body>
</html>

EXECUTION SCREENSHOT

Sample Image

Link Index.Html Client.Js and Server.Js