/2018-03-nette-webpack

:fire: Example of Nette Framework + Webpack 4

Primary LanguageHTMLMIT LicenseMIT

Nette Framework + Webpack 4

This is just for education.

There is a simple example of Nette Framework with jQuery 3, bootstrap 4 and Naja. Naja is modern ES6-like library for Nette snippets ajaxification.

These assets are compiled and bundled together with Webpack.

Development

  • git clone https://github.com/trainit/2018-03-nette-webpack.git
  • cp app/config/config.local.neon.dist app/config/config.local.neon
  • composer install
  • npm install
  • npm run dev
  • php -S 0.0.0.0:8000 -t www

Deployment

  • npm run build

Features

  • 👍 Webpack configuration
    • 🎉 extracting JS to single bundle
    • 🎉 extracting CSS to single file
  • 👍 Snippets
    • 🎉 few snippets
  • 👍 Nette Form
    • 🎉 AJAX submitting
    • 🎉 form builder
      • empty value on control (@ in email)
      • validation rules (filled + email)
      • simple filter (transform email to lowercase)
      • onValidate / onSubmit / onSuccess
    • 🎉 manual rendering
      • success snippet / error snippet
      • required class on form-group
      • description on control

Roadmap

  • ❓ more bundles (front/admin/vendor)
  • ❓ pure sendPayload method
  • ❓ dynamic snippets ( + snippetArea )
  • ❓ Vue.js component

Result

Webpack

Webpack

PHP Development Server

PHP

Browser

Web