MEAN Preprocessor

[fiveworlds]

Hey, is anyone here familiar with MEAN stack I want to implement a preprocessor so I can have the server-side code in the html files like in php's <?php ?> or Asp's <% %>. Do you know if there is a preprocessor available that will do that for me?

 

[Sensei]

If I understood you correctly,

you want to user visit f.e. index.html

And PHP should be called to process this file, even though it's wrong extension .html (instead of .php)..

Is that correct?

 

I made it by simply changing configuration of PHP/Apache. It has option to specify which files with extensions it will process. And default is .php. But you can add there .htm and .html as well.

It's often used to have dynamic images. f.e. add extension .png or dynamic .zip files

And then have PHP script in image.png file (PHP script which is generating PNG on the fly), instead of the real static PNG file on disk.

http://php.net/manual/en/install.unix.apache2.php

step 8 of above manual is describing what extensions will be processed by PHP interpreter, and how to change it.

Edited September 22, 2017 by Sensei

[fiveworlds]

Quote

 

If I understood you correctly,

you want to user visit f.e. index.html

And PHP should be called to process this file, even though it's wrong extension .html (instead of .php)..

Is that correct?

 

No currently I am using the mean stack. Which is

MongoDB, ExpressJs, AngularJs and NodeJs

You can find a prebuilt version here http://meanjs.org/ but I am building from source.

In mean the entire server stack uses javascript so it is quite popular with webdevelopers because they won't need to learn an additional server-side language

currently my server.js looks something like

const express = require('express');
const app = express();
const fs = require('fs');
const sass = require('node-sass');
const sassMiddleware = require('node-sass-middleware');
const path = require('path');
const lessMiddleware = require('less-middleware');
var sw = true;


app.use("/lessStylesheets",lessMiddleware(__dirname+'/less/',{
    debug: true,
    dest: path.join(__dirname, 'public/lessStylesheets/'),
    force: true
}));

app.use("/sassStylesheets",sassMiddleware({
  src: path.join(__dirname, 'sass'),
  dest: path.join(__dirname, 'public/sassStylesheets'),
  debug: true,
  indentedSyntax: true,
  outputStyle: 'compressed'
}));

app.use(express.static('public'));
app.use('/node_modules', express.static('node_modules'))

app.listen(80, function () {
  console.log('Example app listening on port 80!')
});

In order to process get requests MEAN uses express.js which would look something like. Post requests use app.post.

app.get('/templates/form.html', function (req, res) {
  var path = "templates/form.html";
  var head = fs.readFileSync("templates/head.html").toString();
  var foot = fs.readFileSync("templates/foot.html").toString();
  res.send(head+fs.readFileSync(path).toString()+foot);
  sw = false;
})

At the moment all the get and posts requests need to be in or included into the server.js file.

What I want is to only have one app.get or app.post to handle all the get or post requests. Then have the server preprocess the server-side code. It isn't necessary to use the .html extension I could use .njs or something similar.

One possibility is to have two files like a filename.njs and filename.snjs where the .snjs has the server-side code. Another is to only have one file and have nodeJS use cheerio https://cheerio.js.org/ or something similar to parse the html code and execute the server-side code contained in the file.

What I am looking for is an existing library that does this for me. It would be cool if I could load the html file in code and have access to the dom to implement the server-side code (mysql requests etc).