• Stars
    star
    9,326
  • Rank 3,597 (Top 0.08 %)
  • Language
    JavaScript
  • License
    Apache License 2.0
  • Created over 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Web rendering surface for Node applications

Carlo - headful Node app framework


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

image

What can I do?

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

  • For Node applications, the web rendering stack lets users visualize the dynamic state of the app.
  • For Web applications, additional system capabilities are accessible from Node.
  • The application can be bundled into a single executable using pkg.
How does it work?
  • Carlo locates Google Chrome installed locally.
  • Launches Chrome and establishes a connection over the process pipe.
  • Exposes a high-level API for rendering in Chrome with the Node environment.

Usage

Install Carlo

npm

npm i carlo
# 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 in the examples folder.

API

Check out the API to get familiar with Carlo.

Testing

Carlo uses Puppeteer project for testing. Carlo application and all Carlo windows have corresponding Puppeteer objects exposed for testing. Please refer to the API and the systeminfo project for more details.

Contributing to Carlo

Look at the contributing guide to get an overview of Carlo's development.

FAQ

Q: What was the motivation behind this project when we already have Electron and NW.js? How does this project differ from these platforms, how does it achieve something that is not possible/harder with Electron or NW.js?

  • One of the motivations of this project is to demonstrate how browsers that are installed locally can be used with Node out of the box.
  • Node v8 and Chrome v8 engines are decoupled in Carlo, providing a maintainable model with the ability to independently update underlying components. Carlo gives the user control over bundling and is more about productivity than branding.

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

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

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

Carlo prints an error message when Chrome can not be located.

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

Chrome Stable channel, versions 70.* are supported.

More Repositories

1

squoosh

Make images smaller using best-in-class codecs, right in the browser.
TypeScript
20,633
star
2

ndb

ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
JavaScript
10,914
star
3

quicklink

⚡️Faster subsequent page-loads by prefetching in-viewport links during idle time
JavaScript
10,907
star
4

comlink

Comlink makes WebWorkers enjoyable.
TypeScript
10,702
star
5

ProjectVisBug

FireBug for designers › Edit any webpage, in any state https://a.nerdy.dev/gimme-visbug
JavaScript
5,321
star
6

sw-precache

[Deprecated] A node module to generate service worker code that will precache specific resources so they work offline.
JavaScript
5,236
star
7

react-adaptive-hooks

Deliver experiences best suited to a user's device and network constraints
JavaScript
5,068
star
8

ui-element-samples

A collection of prototyped UI elements
JavaScript
4,101
star
9

sw-toolbox

[Deprecated] A collection of service worker tools for offlining runtime requests
JavaScript
3,621
star
10

webpack-libs-optimizations

Using a library in your webpack project? Here’s how to optimize it
3,356
star
11

critters

🦔 A Webpack plugin to inline your critical CSS and lazy-load the rest.
JavaScript
3,330
star
12

psi

PageSpeed Insights Reporting for Node
JavaScript
3,103
star
13

lighthousebot

Run Lighthouse in CI, as a web service, using Docker. Pass/Fail GH pull requests.
JavaScript
2,236
star
14

bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.
TypeScript
2,184
star
15

preload-webpack-plugin

Please use https://github.com/vuejs/preload-webpack-plugin instead.
JavaScript
2,162
star
16

worker-plugin

👩‍🏭 Adds native Web Worker bundling support to Webpack.
JavaScript
1,914
star
17

prerender-loader

📰 Painless universal pre-rendering for Webpack.
JavaScript
1,912
star
18

simplehttp2server

A simple HTTP/2 server for development
Go
1,735
star
19

jsvu

JavaScript (engine) Version Updater
JavaScript
1,698
star
20

size-plugin

Track compressed Webpack asset sizes over time.
JavaScript
1,675
star
21

clooney

Clooney is an actor library for the web. Use workers without thinking about workers.
JavaScript
1,419
star
22

browser-fs-access

File System Access API with legacy fallback in the browser
JavaScript
1,316
star
23

proxx

A game of proximity
TypeScript
1,296
star
24

application-shell

Service Worker Application Shell Architecture
JavaScript
1,169
star
25

dark-mode-toggle

A custom element that allows you to easily put a Dark Mode 🌒 toggle or switch on your site:
JavaScript
1,140
star
26

pwacompat

PWACompat to bring Web App Manifest to older browsers
JavaScript
1,130
star
27

container-query-polyfill

A polyfill for CSS Container Queries
TypeScript
1,106
star
28

idlize

Helper classes and methods for implementing the idle-until-urgent pattern
JavaScript
1,048
star
29

houdini-samples

Demos for different Houdini APIs
JavaScript
967
star
30

css-triggers

A reference for the render impact of mutating CSS properties.
JavaScript
893
star
31

jsbi

JSBI is a pure-JavaScript implementation of the official ECMAScript BigInt proposal.
JavaScript
885
star
32

howto-components

Literate code examples for common UI patterns.
JavaScript
851
star
33

tooling.report

tooling.report a quick way to determine the best build tool for your next web project, or if tooling migration is worth it, or how to adopt a tool's best practice into your existing configuration and code base.
JavaScript
841
star
34

page-lifecycle

PageLifecycle.js is a tiny JavaScript library that allows developers to easily observe Page Lifecycle API state changes cross browser
JavaScript
795
star
35

css-paint-polyfill

CSS Custom Paint / Paint Worklet polyfill with special browser optimizations.
JavaScript
709
star
36

estimator.dev

🧮 Calculate the size and performance impact of switching to modern JavaScript syntax.
JavaScript
667
star
37

picture-in-picture-chrome-extension

JavaScript
655
star
38

web-audio-samples

Web Audio API samples by Chrome Web Audio Team
JavaScript
654
star
39

comlink-loader

Webpack loader to offload modules to Worker threads seamlessly using Comlink.
JavaScript
616
star
40

pwa-wp

WordPress feature plugin to bring Progressive Web Apps (PWA) to Core
PHP
603
star
41

ProgressiveWordPress

A Sample WordPress-based Progressive Web App
JavaScript
570
star
42

web-push-codelab

JavaScript
549
star
43

gulliver

A PWA directory, focusing on collecting PWA best practices and examples.
JavaScript
549
star
44

text-app

A text editor for ChromeOS and Chrome
JavaScript
545
star
45

progressive-tooling

A list of community-built, third-party tools that can be used to improve page performance
JavaScript
545
star
46

wasm-feature-detect

A small library to detect which features of WebAssembly are supported.
JavaScript
518
star
47

svgomg-twa

A sample that project Trusted Web Activities technology to wrap SVGOMG in an Android Application
Shell
512
star
48

web-vitals-report

Measure and report on your Web Vitals data in Google Analytics
JavaScript
494
star
49

text-editor

A text editor build on the Native File System APIs
JavaScript
487
star
50

pptraas.com

Puppeteer as a service
JavaScript
455
star
51

chrome-for-testing

JavaScript
442
star
52

progressive-rendering-frameworks-samples

Samples and demos from the Progressive Rendering I/O talk
JavaScript
407
star
53

wasm-bindgen-rayon

An adapter for enabling Rayon-based concurrency on the Web with WebAssembly.
JavaScript
404
star
54

MiniMobileDeviceLab

A mini mobile web device lab
Objective-C
396
star
55

webm-wasm

webm-wasm lets you create webm videos in JavaScript via WebAssembly.
C++
386
star
56

cronet-sample

A sample for the Cronet library
Java
381
star
57

link-to-text-fragment

Browser extension that allows for linking to arbitrary text fragments.
JavaScript
370
star
58

webpack-training-project

A training project for learning Webpack optimizations
JavaScript
368
star
59

pinch-zoom

TypeScript
366
star
60

samesite-examples

Examples of using the SameSite cookie attribute in a variety of language, libraries, and frameworks.
HTML
365
star
61

airhorn

Air horn
JavaScript
361
star
62

buffer-backed-object

Buffer-backed objects in JavaScript.
JavaScript
349
star
63

first-input-delay

A JavaScript library for measuring First Input Delay (FID) in the browser.
JavaScript
347
star
64

AutoWebPerf

AutoWebPerf provides a flexible and scalable framework for running web performance audits with arbitrary audit tools including PageSpeedInsights, WebPageTest and more.
JavaScript
344
star
65

tti-polyfill

Time-to-interactive polyfill
JavaScript
333
star
66

react-shrine

"Shrine" Progressive Web App sample built with React
JavaScript
330
star
67

dynamic-import-polyfill

A fast, tiny polyfill for dynamic import() that works in all module-supporting browsers
JavaScript
320
star
68

wasi-fs-access

This is a demo shell powered by WebAssembly, WASI, Asyncify and File System Access API.
TypeScript
293
star
69

native-url

Node's url module implemented using the built-in URL API.
JavaScript
284
star
70

two-up

TypeScript
270
star
71

adaptive-loading

Demos for Adaptive Loading - differentially deliver fast, lighter experiences for users on slow networks & devices
JavaScript
266
star
72

so-pwa

A progressive web app to read Stack Overflow content.
JavaScript
255
star
73

import-from-worker

It’s like import(), but runs the module in a worker.
JavaScript
246
star
74

sample-pie-shop

Example e-commerce site to explore PWA (Progressive Web App) use cases.
JavaScript
234
star
75

file-drop

A simple file drag and drop custom-element
TypeScript
226
star
76

form-troubleshooter

TypeScript
211
star
77

postcss-jit-props

A CSS custom property helper based on PostCSS. Supply a pool of variables and this plugin will add them to the stylesheet as they are used.
JavaScript
203
star
78

serial-terminal

Demo application for the Web Serial API.
TypeScript
191
star
79

audioworklet-polyfill

🔊 Polyfill AudioWorklet using the legacy ScriptProcessor API.
JavaScript
190
star
80

http2-push-manifest

Generate a list of static resources for http2 push.
JavaScript
187
star
81

pointer-tracker

Track mouse/touch/pointer events for a given element.
TypeScript
183
star
82

pr-bot

🤖 Compare your base branch to a pull request and run plugins over it to view differences
JavaScript
179
star
83

discovery

Discoveries on Sustainable Loading research
177
star
84

imagecapture-polyfill

MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)
JavaScript
176
star
85

tasklets

JavaScript
176
star
86

credential-management-sample

Credential Management Sample
HTML
157
star
87

wasm-av1

Port of the AV1 Video codec to WebAssembly
C
150
star
88

houdini.how

A community-driven gathering place for CSS Houdini worklets and resources.
JavaScript
150
star
89

perf-track

Tracking framework performance and usage at scale
Svelte
148
star
90

kv-storage-polyfill

A polyfill for the kv-storage built-in module.
JavaScript
145
star
91

telnet-client

TypeScript
142
star
92

wadb

A TypeScript implementation of the Android Debug Bridge(ADB) protocol over WebUSB
TypeScript
142
star
93

pwa-workshop-codelab

JavaScript
142
star
94

http2push-gae

Drop-in HTTP2 push on App Engine
HTML
140
star
95

chromeos_smart_card_connector

Smart Card Connector App for Chrome OS
C++
133
star
96

snapshot

TypeScript
133
star
97

devwebfeed

Firehose of team++ resources
JavaScript
130
star
98

sample-currency-converter

A sample currency conversion Progressive Web App
JavaScript
129
star
99

extension-manifest-converter

Python
119
star
100

json-parse-benchmark

Benchmark comparing JSON.parse vs. equivalent JavaScript literals across JavaScript engines.
JavaScript
119
star