generator-webapp

A gulp.js generator for modern webapps

3,771

708

3,771

View on GitHub View on NPM

Top Related Projects

html5-boilerplate

56,396

A professional front-end template for building fast, robust, and adaptable web apps or sites.

create-react-app

102,511

Set up a modern web app by running one command.

vue-cli

29,757

🛠️ webpack-based tooling for Vue.js Development

gatsby

55,199

The best React-based framework with performance, scalability and security built in.

Quick Overview

Generator-webapp is a Yeoman generator that scaffolds out a front-end web application. It sets up a modern development environment with tools like Gulp, Sass, and Babel, allowing developers to quickly start building web projects with best practices and optimizations built-in.

Pros

Quickly sets up a complete front-end development environment
Includes modern tools and best practices out of the box
Customizable and extensible to fit specific project needs
Actively maintained and updated with the latest web technologies

Cons

Learning curve for developers unfamiliar with Yeoman or the included tools
May include more features than needed for simple projects
Opinionated setup might not align with all team preferences or project requirements

Getting Started

To use generator-webapp, follow these steps:

Install Yeoman and generator-webapp:
```
npm install -g yo generator-webapp
```
Create a new directory for your project and navigate to it:
```
mkdir my-webapp && cd my-webapp
```
Run the generator:
```
yo webapp
```
Answer the prompts to customize your project setup.
Once the generator finishes, start the development server:
```
npm start
```

Your new web application is now set up and ready for development!

Competitor Comparisons

html5-boilerplate

56,396

A professional front-end template for building fast, robust, and adaptable web apps or sites.

Pros of HTML5 Boilerplate

Lightweight and minimalistic, providing a clean starting point
Extensive documentation and well-established best practices
Cross-browser compatibility and mobile-friendly defaults

Cons of HTML5 Boilerplate

Less opinionated, requiring more manual setup for complex projects
Fewer built-in tools and automation features
Limited customization options during initial setup

Code Comparison

HTML5 Boilerplate (index.html):

<!doctype html>
<html class="no-js" lang="">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">

generator-webapp (app/index.html):

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

HTML5 Boilerplate provides a more minimal starting point, while generator-webapp includes additional meta tags and a viewport setting by default. The generator-webapp also typically includes more opinionated structure and tooling setup, which is not visible in this basic HTML comparison.

create-react-app

102,511

Set up a modern web app by running one command.

Pros of create-react-app

Specifically tailored for React development, providing a more streamlined experience
Includes built-in support for modern JavaScript features and CSS preprocessing
Offers a more comprehensive and opinionated setup out of the box

Cons of create-react-app

Less flexible than generator-webapp for non-React projects
Heavier initial setup with more dependencies, which may not be necessary for simpler projects
Limited customization options without ejecting, which can complicate the build process

Code Comparison

create-react-app:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

generator-webapp:

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <script src="scripts/main.js"></script>
  </body>
</html>

The code snippets highlight the different focus of each tool. create-react-app is React-centric, while generator-webapp provides a more generic web application structure.

angular-cli

26,729

CLI tool for Angular

Pros of Angular CLI

Specifically tailored for Angular development, providing a more integrated experience
Offers a comprehensive set of tools for generating, developing, testing, and deploying Angular applications
Includes built-in support for TypeScript and advanced features like lazy loading

Cons of Angular CLI

Steeper learning curve for developers new to Angular ecosystem
Less flexibility for non-Angular projects or custom build configurations
Larger initial project size due to Angular-specific dependencies

Code Comparison

Angular CLI project generation:

ng new my-angular-app
cd my-angular-app
ng serve

Generator-webapp project generation:

yo webapp
gulp serve

Key Differences

Angular CLI is focused on Angular development, while generator-webapp is more general-purpose
Angular CLI provides a more opinionated structure and toolset, whereas generator-webapp offers more flexibility
Generator-webapp uses Gulp for task running, while Angular CLI uses its own CLI commands and webpack under the hood
Angular CLI includes features like routing and state management out of the box, which are not present in generator-webapp

Both tools aim to simplify web application development, but Angular CLI is more specialized for Angular projects, while generator-webapp caters to a broader range of web development needs.

vue-cli

29,757

🛠️ webpack-based tooling for Vue.js Development

Pros of vue-cli

Specifically tailored for Vue.js development, offering a more streamlined experience for Vue projects
Provides a powerful plugin system for easy integration of additional features and tools
Offers a graphical user interface (GUI) for project management and configuration

Cons of vue-cli

Less flexible for non-Vue projects compared to the more general-purpose generator-webapp
May have a steeper learning curve for developers not familiar with Vue.js ecosystem

Code Comparison

generator-webapp:

'use strict';
const Generator = require('yeoman-generator');

module.exports = class extends Generator {
  // Generator implementation
};

vue-cli:

module.exports = (api, options) => {
  // Vue CLI plugin implementation
};

Key Differences

generator-webapp is a Yeoman generator, while vue-cli is a dedicated CLI tool for Vue.js projects
generator-webapp focuses on general web application scaffolding, while vue-cli is specifically designed for Vue.js development
vue-cli offers more advanced features like a plugin system and GUI, whereas generator-webapp provides a simpler, more straightforward approach to project setup

Use Cases

Choose generator-webapp for general web application projects or when flexibility across different frameworks is needed
Opt for vue-cli when developing Vue.js applications or when looking for a more opinionated and feature-rich development environment specific to Vue

gatsby

55,199

The best React-based framework with performance, scalability and security built in.

Pros of Gatsby

Built-in performance optimizations like code splitting and prefetching
Rich plugin ecosystem for extending functionality
GraphQL data layer for efficient data management and querying

Cons of Gatsby

Steeper learning curve, especially for developers new to React or GraphQL
Potentially slower build times for large sites
More complex setup compared to simpler static site generators

Code Comparison

Gatsby (React-based component):

import React from "react"
import { Link } from "gatsby"

const Header = () => (
  <header>
    <Link to="/">Home</Link>
  </header>
)

export default Header

Generator-webapp (HTML with Yeoman-generated structure):

<!doctype html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>My Web App</title>
  </head>
  <body>
    <header>
      <a href="/">Home</a>
    </header>
  </body>
</html>

Generator-webapp provides a simpler, more traditional web development setup, while Gatsby offers a modern React-based approach with additional features and optimizations. The choice between the two depends on project requirements, team expertise, and desired level of control over the development process.

next.js

124,777

The React Framework

Pros of Next.js

Built-in server-side rendering and static site generation
Automatic code splitting for faster page loads
Extensive ecosystem with built-in optimizations and plugins

Cons of Next.js

Steeper learning curve for developers new to React
More opinionated structure, which may limit flexibility
Potentially larger bundle size for simple applications

Code Comparison

Next.js:

// pages/index.js
export default function Home() {
  return <h1>Welcome to Next.js!</h1>
}

generator-webapp:

<!-- index.html -->
<!doctype html>
<html>
  <body>
    <h1>Welcome to Yeoman Webapp!</h1>
  </body>
</html>

Key Differences

Next.js is a full-fledged React framework, while generator-webapp is a Yeoman generator for scaffolding web apps
Next.js focuses on server-side rendering and modern React development, whereas generator-webapp provides a more traditional client-side setup
Next.js offers a more integrated development experience, while generator-webapp gives developers more freedom in choosing their tools and structure

Use Cases

Next.js: Ideal for large-scale React applications requiring SEO optimization and fast initial load times
generator-webapp: Better suited for simpler web projects or developers who prefer more control over their build process and tooling

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Web app generator

Yeoman generator that scaffolds out a front-end web app using gulp for the build process

ð§ There is a pre-release version of this generator, you can install it by running npm install --global generator-webapp@next. Help us make it stable by reporting bugs! ð§

Features

Please see our gulpfile for up to date information on what we support.

enable ES2015 features using Babel
CSS Autoprefixing
Built-in preview server with BrowserSync
Automagically compile Sass with libsass
Automagically lint your scripts
Map compiled CSS to source stylesheets with source maps
Awesome image optimization

For more information on what this generator can do for you, take a look at the gulp plugins used in our package.json.

libsass

Keep in mind that libsass is feature-wise not fully compatible with Ruby Sass. Check out this curated list of incompatibilities to find out which features are missing.

If your favorite feature is missing and you really need Ruby Sass, you can always switch to gulp-ruby-sass and update the styles task in gulpfile accordingly.

Getting Started

Install: npm install --global yo gulp-cli generator-webapp
Run yo webapp to scaffold your webapp
Run npm start to preview and watch for changes
Run npm start -- --port=8080 to preview and watch for changes in port 8080
Run npm install --save <package> to install dependencies, frontend included
Run npm run serve:test to run the tests in the browser
Run npm run serve:test -- --port=8085 to run the tests in the browser in port 8085
Run npm run build to build your webapp for production
Run npm run serve:dist to preview the production build
Run npm run serve:dist -- --port=5000 to preview the production build in port 5000

Docs

getting started with this generator
recipes for integrating other popular technologies like CoffeeScript
contribution docs and FAQ, good to check before posting an issue

Options

--skip-welcome-message Skips Yeoman's greeting before displaying options.
--skip-install-message Skips the the message displayed after scaffolding has finished and before the dependencies are being installed.
--skip-install Doesn't automatically install dependencies after scaffolding has finished.
--test-framework=<framework> Either mocha or jasmine. Defaults to mocha.