Git Product home page Git Product logo

pulito's Introduction

pulito

Conventions and structure for a Vanilla JS application with a supporting webpack config.

See A la carte Web Development for more background on pulito and how it fits into "A la carte" web development.

Pulito expects a project to be laid out in the following format:

/modules
   util.js            <-- JS modules. They can also be subdirs.
   ...
/modules/element-name <-- Custom elment name.
           index.js
           element-name.js
           element-name.[s]css
           element-name-demo.js
           element-name-demo.html
/pages                <- pages in your application.
   index.js
   index.html
   page2.js
   page2.html
   ...

If your project follows the conventions then pulito provides a webpack config file that will build your application, both development and production profiles, and will build demo pages for custom elements if they are present.

Disclaimer

This is not an officially supported Google product.

Skeleton

If you are starting a fresh project, pulito contains a project skeleton to get you going.

$ npm init
$ npm add pulito
$ unzip node_modules/pulito/skeleton.zip

You will be prompted to overwrite package.json, select 'yes'.

Now you will need to run npm install since the package.json was updated.

$ npm install

You will also need to edit package.json to reflect the name of your project, etc. since we just overwrote it, but you can leave that for later if you are just experimenting with pulito.

Now run:

$ make serve

At this point you should be able to visit the running skeleton app at http://localhost:8080/index.html. This page is a built version of pages/index.html which has an <example-element> on it - a simple spinner.

You can visit the demo page directly for the spinner by navigating to http://localhost:8080/example-element.html.

Directory Structure

JS modules are stored under /modules and each custom element has its own directory under modules/. Each element may have a demo page, which is indicated by the presence of a file ending in -demo.html and -demo.js in the element's directory. If both files exist then a demo page will be written into the dist directory.

Similary, pages of the webapp are expected to sit under the /pages directory, and consist of both a JS and HTML file. These will be processed and their output will also appear in the dist directory.

See also, section Public Path.

Element Structure

Each element has its own directory.

  • index.js - This file imports (via ES6 module imports) all the JS and CSS that define the element.
  • ???.js - This file contains all the JS for the custom element.
  • ???.css - This file contains all the CSS for the custom element. Note that this can also be an SCSS file with a .scss extension.
  • ???-demo.js -This file contains any JS that will run on the demo page.
  • ???-demo.html - This file is the HTML for the demo page.

You do not need to have a demo for each element. If you don't have a demo, just omit the -demo.js and -demo.html files.

Usage

The webpack.config.js for such a project can be very simple, just run:

$ npm add pulito

Then create a webpack.config.js file that looks like:

const commonBuilder = require('pulito');
module.exports = (env, argv) => commonBuilder(env, argv, __dirname);

At this point there's a lot of functionality present.

$ npx webpack --mode=development

Will build a debug version of all the demo pages and all the app pages in dist. In the example Makefile, this is the default make command.

$ npx webpack-dev-server --mode=production --watch-poll

Will do the same as build, but served by the webpack-dev-server, which will rebuild all source and reload the webpage any time you edit a file. In the example Makefile, this is command make serve.

$ npx webpack --mode=development --watch-poll

Will do the same as build, but will rebuild all the files in dist when you edit a file. In the example Makefile, this is the command make watch.

$ NODE_ENV=production npx webpack --mode=production

Will build a release version of the pages in dist, no demo pages will be emitted. In the example Makefile, this is the command make release.

Public Path

Sometimes, an app wants to specify that the js/css files are in an absolute path (e.g. /js/, /static/). Webpack supports this with publicPath. Since Pulito just returns a Webpack object, the output of commonBuilder can be modified directly, like:

const commonBuilder = require('pulito');
module.exports = (env, argv) => {
  let config = commonBuilder(env, argv, __dirname);
  config.output.publicPath='/static/';
  return config;
}

After re-creating the files (e.g. make release), the js and css will be linked in like

<!-- In index.html -->
<link href="/static/index-bundle.css?025351514c76002d06e1" rel="stylesheet">
<script type="text/javascript" src="/static/index-bundle.js?b4a24109eb00b1ce7dc9"></script>

Also note that when running the dev server make serve, all pages will be served out of that localhost:8080/[publicPath], for example, localhost:8080/static/example-element.html.

pulito's People

Contributors

jcgregorio avatar jwata avatar kjlubick avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  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.