npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webpagetoccode

v1.1.1

Published

Converts an output folder containing a website to C-Code. Creates a header- and a source file, which can be simply included into projects

Downloads

1

Readme

WebPageToCCode

npm

TLDR;

A tool for generating C-Code out of a website to be used to compile it into ESP8266 or ESP32 based projects.

What does it do?

This tool can take an output directory of a modern webframework like Angular or React and recursivly map all files into a C header and source file. Both files are human readable formatted and contain an copyright string on top. Afterwords it uses the popular Arduino Webserver library to register all files by it's file positions and create a callback functions for it.

Why the project is useful?

The main goal is to split and automate the process of creating a modern website using popular frameworks and easily map it into an ESP Firmware without worry about all the fancy web stuff like Media Types, Compression Minfying...

How to use the tool?

Install

To use it within your package.json as script, just install it as DevDependency

  npm install -D webpagetoccode

If you plan to use it as a general tool of choice it is recommended to install it globally

  npm install -g webpagetoccode

Usage

To use it as script inside your package.json.

For example within an React Project:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "postbuild": "precompress -t gz -i html,js,json,css,txt build && webpagetoccode -s build -t ../target"
  }

Or to use it as generall tool simply put

> webpagetoccode -h

Options:
      --version  Show the package version                               [boolean]
  -s, --source   Sets the root directory containing the website.
                                                              [string] [required]
  -t, --target   Sets the target directory where the output is generated.       
                                                        [string] [default: "lib"]
  -a, --author   Adds the author to the source code files as requierd by cpplint.
                                                    [string] [default: "unknown"]
  -h, --help     Show this message                                      [boolean]

The minimal usage is as follows

webpagetoccode --source <RootDirectory>

NOTE

The tool checks for files which are compressed as gz. You can leave the compressed and none-compressed files side by side and the tool takes only the compressed files wherever possible.


How does it looks like?

The Tool generates to files website.h and websites.cpp. The first one website.h just declare the Webserver as extern dependency and publishes the registerWebsite() function. The second file website.cpp contains all the stuff.

To include the website just copy both generated files into your Arduino / CPP project and #include "website.h". After you setup your Webserver call registerWebsite() - That's it.

#include <Webserver.h>
#include "website.h"

WebServer server(80);

void setup(){
  registerWebsite();
  server.begin();
}

void loop(){
  server.handleClient();
}

NOTE

If the tool finds an index.html file in your root directory, it automatically addes a default route "/" to serve this file.

Regardless if it`s a compressed file or not.