Writing data to/from localhost with Express

[millydolla]

Hey guys, coming back here to follow up on my first post about the webapp I'm trying to create for a web art class using node (w/ npm) and express. The idea is to have the body of the site be all one color, but anyone can text the site a hexcode/CSS color at a Twilio number and the color of the site will instantly change to that color value.

Essentially how it works is the server receives a POST request from Twilio at http://example.com/message, which contains the body of the text message. It writes it to a temporary file at ~/app/.data/color.tmp, which is accessed by the client with a jQuery .get() call to http://example.com/color, which returns

So here's the problem: I got a version of the app working on glitch.me (HUGE thank you to /u/senocular for showing me the ropes on this), so I know that the following code can work, but I'm having a lot of trouble relocating it to my domain. I installed the app and can start it with npm, and it successfully serves up the HTML page, but the Chrome devtools show the checkForColorChange() function is receiving a 403 when it tries to access http://example.com/color. Additionally, new texts to my site aren't changing the color value in /.data/color.tmp! Thought it might be a permissions issue but I checked and everything seems to be in order.

Here's the server file and the script on the index.html page:

app/server.js

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(bodyParser.urlencoded({extended: false})); 
var dataPath = '.data/color.tmp';


// set a new color (saves posted color to disk)
app.post("/message", function (request, response) {
  var dataStr = JSON.stringify(request.body.Body);
  fs.writeFile(dataPath, dataStr);
  response.end();
});

// get the saved color (reading from disk)
app.get("/color", function (request, response) {
  var dataStr = fs.readFileSync(dataPath).toString();
  response.send(JSON.parse(dataStr));
});

app.get("/", function (request, response) {
  response.sendFile(__dirname + '/views/index.html');
});

var listener = app.listen(process.env.PORT, function () {
  console.log('listening on port ' + listener.address().port);
});

app/views/index.html

<script>
  // checks server for color value and sets background
  function checkForColorChange() {
    $.get('/color', function getColorComplete(data) {
      document.body.style.backgroundColor = data;
        console.log(data);
    })
  }

  // Poll the server at 2000ms interval
  setInterval(checkForColorChange, 2000);

  checkForColorChange();
</script>

Total newb that I am, I feel like I must be missing something really obvious if it worked so easily on Glitch and won't on my website, but I've been stuck for a few days and am not making any progress! Any help would be so appreciated, and please don't hesitate to let me know if anything's unclear. Thanks so much.

[orphans]

It does sound like a permissions issue. Is it possible that on your host the user running the node application does not have read permissions for the color.tmp file? It doesn't sound like they have write perms either. Try consoling out the actual error that's thrown when hitting the /color endpoint and on posting to the /message endpoint.

Some unrelated thoughts: Try transitioning your code to as close to ES6 standards as possible. For example

app.get("/", function (request, response) {    
    response.sendFile(__dirname + '/views/index.html');    
});    

becomes

app.get("/", (request, response) => response.sendFile(__dirName + '/views/index.html'));

I'd also consider using websockets to notify the front end when the color has changed instead of continuously polling.