Notoriously Pedantic Magistrate

    pjs-cli

    0.6.2 • Public • Published

    pajamas-js-logo

    Logo made by Yana Smirnova

    npm version

    Installation

    npm install -g pjs-cli

    Usage

    pjs

    By default, pjs will listen on the port 8080 (or process.env.PORT) and read the current folder. You can change this settings in http://localhost/_/, take a look at the usage documentation.

    Inside the folder where pjs is reading you can prototype any node.js applications thanks to the .pjs files (see examples below).

    For using pjs as a daemon, your can use these commands:

    • pjs start (start pjs as a daemon)
    • pjs stop
    • pjs restart
    • pjs status

    Examples

    To launch the examples on your computer, install first pjs-cli and then :

    git clone https://github.com/Atinux/pjs.git
    cd pjs/examples/
    pjs

    You can visit http://localhost:8080 too run all the examples presented below.

    What are these .pjs files ?

    It's 90% of EJS templates with a done() method for making every asynchronous operations possible! (take a look at the examples #2)

    Example 1 - Basis

    Let's say that I have a file name hello.pjs in my current folder:

    <% var foo = 'PJS'; %>
    Hello <%= foo %>!

    I launch the cli in my current folder: pjs

    Then, I visit : http://localhost:8080/hello.pjs

    Result: Hello PJS!

    Example 2 - Asynchronous

    What about if we want something a little bit more asynchronous?

    File async.pjs:

    <%
    var request = require('request'),
        name;
    request.get('http://www.mocky.io/v2/56af5cec1100004516f9bc90', function (err, res, body) {
      // body = { "name": "PJS" }
      name = JSON.parse(body).name;
      done();
    });
    %>
    Hello <%= name %>!

    As you can see, I can require a module, for that, please make sure to run npm install request in the current directory before visiting http://localhost:8080/async.pjs

    The result will be : Hello PJS!

    Notice the done(); method, it is important here for PJS to wait until the request is completed and the name set before going further in the template.

    Example 3 - Includes

    You may also want to include other .pjs files, that's why you can use the <% include your_file.pjs %> directly in your templates.

    File include.pjs:

    <p>I'm including hello.pjs</p>
    <%- include hello.pjs %>

    Result on http://localhost:8080/include.pjs

    I'm including hello.pjs
    Hello bar!
    

    Actually, only this pre-processor include works. <%- include(file, { ... }); %> is not available yet.

    Example 4 - REQUEST

    Inside each .pjs file, you have access of the REQUEST variable. It contains some of the properties listed from Express (http://expressjs.com/en/4x/api.html#req);

    File: request.pjs

    <% if (REQUEST.method === 'POST') { %>
      <p><b>New todo:</b> <%= REQUEST.body.todo %></p>
    <% } %>
    <form method="post">
      <input type="text" name="todo" placeholder="Learn Piano..." />
      <button type="submit">Add todo</button>
    </form>

    If you fill the input and click on "Add todo", the condition will pass and "New todo:" will be displayed on the screen with the content of the input.

    List of the properties available in REQUEST:

    - baseUrl
    - body
    - headers
    - hostname
    - fresh
    - ip
    - ips
    - method
    - originalUrl
    - path
    - protocol
    - query
    - secure
    - stale
    - subdomains
    - url
    - xhr
    

    Aliases

    • REQ is equal to REQUEST.
    • FORM which is REQ.body merge into REQ.query
    • METHOD is equal to REQUEST.method

    Example 5 - RESPONSE

    Sometimes you want to send back a custom status code or even a custom header. You can use the RESPONSE (alias: RES) object for this, here the current method available:

    - .status(code) // Set the HTTP status for the response
    - .header(field [, value]) // Same as res.set() for Express
    - .type(type) // Same as res.type() for Express
    

    File response.pjs:

    <%
    RESPONSE.header('Custom', 'Hi!');
    RESPONSE.status(404);
    RESPONSE.type('text');
    %>
    I'm a page with a custom status code and header!

    If you go on http://localhost:8080/response.pjs with POSTMAN, you will see the status code 404 with the custom header and the Content-Type set to plain/text.

    Example 6 - SESSION

    In your PJS templates, you have also access to SESSION. This is useful for creating small apps for prototyping.

    Here a Todo app with the use of the sessions with PJS.

    File session.pjs:

    <%
    SESSION.todos = SESSION.todos || [];
    if (REQUEST.method === 'POST' && REQUEST.body.todo) {
      SESSION.todos.push(REQUEST.body.todo);
    }
    if (REQUEST.method === 'GET' && REQUEST.query.index) {
      SESSION.todos = SESSION.todos.filter(function (todo, index) {
        return index !== Number(REQUEST.query.index);
      });
    }
    %>
    <form method="post">
      <input type="text" name="todo" placeholder="Learn Piano..." />
      <button type="submit">Add todo</button>
    </form>
    <ul>
      <% SESSION.todos.forEach(function (todo, index) { %>
        <li><%= todo %> - <a href="?index=<%- index %>">x</a></li>
      <% }); %>
    </ul>

    Go to http://localhost:8080/session.pjs to se it working.

    SESSION is equivalent of req.session in Express. PJS use session-file-store to persist the sessions in files, so you can restart pjs without worrying about the sessions.

    Example 7 - JSON

    For sending back a JSON object, simply display it with <%- yourJSON %>.

    File json.pjs:

    <%- FORM %>

    FORM is an alias of REQ.body merged into REQ.query.

    Try to visit http://localhost:8080/json?foo=bar&why=not

    As you can see in the url, the .jps is optional.

    Example 8 - Files

    PJS let you upload files via multer. The maximum number of files is 10 and each file size 5 MB. The files are stored in the /tmp folder and are automatically deleted when the page is rendered.

    You can access the files via REQUEST.files. Important, the form as to be multipart (multipart/form-data).

    File files.pjs:

    <% if (METHOD === 'POST' && REQ.files) { %>
    <pre><%- JSON.stringify(REQ.files, undefined, 2) %></pre>
    <% } %>
    <form method="post" enctype="multipart/form-data">
      <p>File: <input type="file" name="file" /></p>
      <button type="submit">Upload</button>
    </form>

    You can go on http://localhost:8080/files.pjs, choose a file and click Upload, you will see all the data inside REQUEST.files.

    Example:

    [
      {
        "fieldname": "file",
        "originalname": "pjs-image.jpg",
        "encoding": "7bit",
        "mimetype": "image/jpeg",
        "destination": "/tmp",
        "filename": "b52fb2303738fa17c0a2c8593de76798",
        "path": "/tmp/b52fb2303738fa17c0a2c8593de76798",
        "size": 71448
      }
    ]

    About PJS

    As said before, PJS is mostly for quick prototyping and has no use case for production.

    The idea was born after reading this article by VJEUX: http://blog.vjeux.com/2015/javascript/challenge-best-javascript-setup-for-quick-prototyping.html

    Todo

    • Trying vhost for rendering different folders (maybe not using res.render instead with a vhost middleware?)
    • Handling 404, 500 errors via templates (404.pjs, 500.pjs) if exists, use: app.use(function(err, req, res, next) {...});
    • Config WinstonJS log system
    • ./.pjs/config.json have a lastUpdate field to know on the ping when the recluster has reloaded
    • Add tests + jslint (start server on test/pjs/ + call request and check source code) + Travis + Codecov.io + Bithound (dependencies + code) + IssueStats.com
    • Documentation with gitbook
    • Central UI (only links to the modules): url/_ + Add basic auth on _ and _/*
    • UI for configuring PJS (url/_/config): Authentification, Server (default port, proxy, SSL, folder for public views + for each vhost), Upload (nbFiles, fileSize, folder), Sessions (Secret key, Store (Mongo/Redis/Memory/Files + config), Sockets (enable/disable + socket config file), Errors Handler (Winstog log files, Sentry config, etc.)
    • UI for configuring the Routes (url/_/routes): Router /api/users/:id -> render file api/users.pjs + add req.params inside REQ + FORM
    • UI for configuring the Node modules (url/_/npm): Listing installed modules, Install/Update/Remove (http://npmsearch.com/query?q=pjs&fields=name,version,repository,description,author)
    • UI for viewing/searching the logs (url/_/logs)
    • Finding a way of using the sockets and configuring them server-side (path of the file to use) + try/catch to avoid server error on startup
    • Video of presentation

    Install

    npm i pjs-cli

    DownloadsWeekly Downloads

    2

    Version

    0.6.2

    License

    MIT

    Last publish

    Collaborators

    • atinux