Connecting Node.js script to a front-end project

Question

As a javascript newbie, I want to create a front-end project with a very little backend solution using Node.js.

I have a user inteface with some variables and a button. These variables have to be passed to a simple .txt file(on my filesystem) and overwrite its content. For this, I'm using a nodejs script:

var fs = require('fs');

fs.writeFile('log.txt', 'This is my text', function (err) {
  if (err) throw err;
  console.log('Replaced!');
});

But I want this to work onClick, whereas this only works from the command-line.

So I have the two following problems:

I want to update the .txt file with the button click. So basically the above written code has to be executed, when I click the button. But I don't understand, how to connect the front-end with this nodejs file.
I want the content to be dynamical. I'm sure, once the first problem is solved, this will be straightforward, but right now I don't know this either.

I'm 100% sure I'm missing something(maybe a web-server, but even then, how?). I did my research but all I found was either an overkill or I didn't even understand it. Any help would be appreciated, a tutorial, an advice or just a keyword, that I can use for my research.

Node.js is a web server platform. I'm a newbie myself. I found this tutorial very helpful. code.visualstudio.com/docs/nodejs/nodejs-tutorial. — Gordon Kushner
– Gordon Kushner, Commented Feb 12, 2018 at 19:38
I think that your file should be server-side and your node script included in a small API (you can easily find documentation about Node API). When an action is performed client-side, use Ajax to request your API with proper params, update your file and send its updated content to you client-side to update your user interface. — Striped
– Striped, Commented Feb 12, 2018 at 19:40

Jasperan · Accepted Answer · 2024-01-02 15:49:21Z

4

Have a look at express. It's a "Fast, unopinionated, minimalist web framework for node". With this you can build a small webserver:

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

app.get('/', function (req, res) {
  res.send('Hello World');
});

app.listen(3000); // Webserver is running on port 3000

If you run it and go to your browser on http://localhost:3000, it would print Hello World.

Now what you would do is call your logging function every time a specific URL is requested.

var fs = require('fs');

function log(text, callback) {
  fs.writeFile('log.txt', text, callback);
}

app.get('/', function (req, res) {
  log('This is my text', function (err) {
    if (err) throw err;
    res.send('Replaced!');
  });
});

Now when you click the button you need to make an AJAX request to the server (maybe using jQuery).

edited Jan 2, 2024 at 15:49

Jasperan

4,9457 gold badges33 silver badges69 bronze badges

answered Feb 12, 2018 at 19:45

mbrandau

5543 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

hotigeftas Over a year ago

Okay, now I'm a bit further. I have played around with Express and Node since then and looked up a couple of youtube tutorials. I have one remaining question though. So if I want my app to have a server(or build any real life web application) I have to say goodbye to the conventional html and css and use preprocessors instead of them?

mbrandau Over a year ago

Not at all, but they certainly make life easier for you. You can serve your website from a standard webserver and make the AJAX requests to a different server.

hotigeftas Over a year ago

But then again where is the connection between the front-end and the back-end? Can I state AJAX request to the express server from the front-end? By the way, I really appreciate your help!

mbrandau Over a year ago

Given your frontend is hosted on example.com and your backend on api.example.com. On your frontend you can then make requests to api.example.com.

megamit · Accepted Answer · 2018-02-12 19:41:29Z

Node.js doesnt have a built in front-library like some other scripting languages such as Python or VB. To create a node.js your intuition was correct in that you will need your app to expose itself as a web-server. The popular library to do this is called express and it is very easy to get started. I suggest that you follow the express quickstart tutorial to get into it.

From here you can wrap your code inside a route of the webserver (say /save) for example

var fs = require('fs');
var express = require('express');
var app = express();

app.get('/save', function (req, res) {
  fs.writeFile('log.txt', 'This is my text', function (err) {
    if (err) throw err;
    console.log('Replaced!');
    res.send('Replaced!')
  });
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))

With this example with the dependencies installed opening localhost:3000/save in your browser would cause your code to be run.

Collectives™ on Stack Overflow

Connecting Node.js script to a front-end project

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related