GithubHelp home page GithubHelp logo

hhy5277 / carlo Goto Github PK

View Code? Open in Web Editor NEW

This project forked from googlechromelabs/carlo

0.0 2.0 0.0 84 KB

Web rendering surface for Node applications

License: Apache License 2.0

JavaScript 100.00%

carlo's Introduction

Carlo - headful Node app framework

NPM carlo package Install Size

Carlo provides Node applications with Google Chrome rendering capabilities. Carlo communicates with the locally-installed browser instance using the Puppeteer project. Carlo also provides remote call infrastructure for communication between Node and the browser.

API | FAQ | Contributing

image

What can I do?

With Carlo, you can create hybrid applications that use Web stack for rendering and Node for capabilities:

  • For Node applications, you can visualize dynamic state of your Node app using web rendering stack
  • For Web applications, you can expose additional system capabilities accessible from Node
  • You can bundle your application into a single executable using pkg.
How does it work?
  • Carlo locates Google Chrome installed locally
  • Launches it and establishes connection to Chrome over the process pipe
  • Exposes high level API for rendering in Chrome in Node environment

Usage

Install Carlo

npm

npm i carlo

yarn

yarn add carlo

Carlo requires at least Node v7.6.0.

Example - Display local environment

Save file as example.js

const carlo = require('carlo');

(async () => {
  // Launch the browser.
  const app = await carlo.launch();

  // Terminate Node.js process on app window closing.
  app.on('exit', () => process.exit());

  // Tell carlo where your web files are located.
  app.serveFolder(__dirname);

  // Expose 'env' function in the web environment.
  await app.exposeFunction('env', _ => process.env);

  // Navigate to the main page of your app.
  await app.load('example.html');
})();

Save file as example.html

<script>
async function run() {
  // Call the function that was exposed in Node.
  const data = await env();
  for (const type in data) {
    const div = document.createElement('div');
    div.textContent = `${type}: ${data[type]}`;
    document.body.appendChild(div);
  }
}
</script>
<body onload="run()">

Run your application:

node example.js

Check out systeminfo and terminal examples with richer UI and RPC-based communication between the Web and Node under the examples folder.

API

Check out API to get familiar with Carlo API.

Contributing to Carlo

Check out contributing guide to get an overview of Carlo development.

FAQ

Q: What was the motivation behind this project when we already have Electron and NW.js? How this differs from these platforms, how it helps to achieve something that's not possible/harder with these two?

  • One of the motivations is to demonstrate how browser installed locally can be used with Node out of the box.
  • Unlike with Electron, Node v8 and Chrome v8 engines are decoupled in Carlo, providing a maintainable model with the ability of the independent updates of the underlying components. Carlo is less about branding and is more about productivity + giving the control over bundling to the user.

Q: Can Node app using Carlo be packaged as a Desktop app?

One can use the pkg project to package their Node app as a Desktop app. Carlo does not provide the branding configurability such as application icon or customizable menus, it focuses on the productivity and Web/Node interoperability instead. Check out the systeminfo example and call pkg package.json in it to see how it works.

Q: What happens if the user does not have Chrome installed?

Carlo prints error message when it can't locate Chrome.

Q: What is the minimum Chrome version that Carlo supports?

Chrome Stable channel, versions 70.* are supported.

carlo's People

Contributors

0xflotus avatar alexkozy avatar aslushnikov avatar djyde avatar joeleinbinder avatar jwharrie avatar markozxuu avatar mustafaismail22 avatar p01 avatar pavelfeldman avatar styfle avatar vsemozhetbyt avatar xat avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.