Tuesday 14 March 2017

Package a node app for the browser using webpack

So this may be naive, but can I run node only style apps in the browser? I've see tuts for frontend stuff. I've seen tuts for backend stuff. I want to run https://github.com/lapwinglabs/x-ray in a browser and do something quick and dirty like (this code may not be perfect)

$(document).ready(function() {
  var phantom = require('x-ray-phantom');
  var Xray = require('x-ray');

  var x = Xray()
    .driver(phantom());

  x('http://google.com', 'body')(function(err, str) {
    $( "body" ).replaceWith( "str" );
  });
});

To do a whole site pass though without an iframe. The purpose is so I can re-write CSS on internal company assets in sort of a global fashion. I'll be able to just pass a url and the page will display that. If I have custom css for it, then that will be active. I still gotta work out auth, but im not worried about it at this exact moment.

I've used x-ray with express in the past and it worked like a charm. In this context though I've taken a liking to Laravel and would like to stand up my apps in that.

The latest Laravel has "mix", a web pack front end. It works great for those assets. If I try to webpack x-ray though, I run into a flurry of issues like:

Module not found: Error: Can't resolve yadayadayada

So you can set an export like this:

module.exports.node = {
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
};

While that module errors, I feel like I need those things. and in the browser I get:

Uncaught Error: Cannot find module "child_process"

I have a feeling things like this are not supposed to work, but I'm hoping I'm mistaken.



via rlewkowicz

No comments:

Post a Comment