contributte/webpack-skeleton

🎁 Webpack 5 project skeleton based on Nette Framework (@nette) and Contributte (@contributte) libraries by @f3l1x.

Website 🚀 contributte.org | Contact 👨🏻‍💻 f3l1x.io | Twitter 🐦 @contributte

---

Goal

Main goal is to provide webpack starter-kit project for Nette developers.

Demo

https://examples.contributte.org/webpack-skeleton/

Installation

You will need PHP 8.1+ and Composer.

Create project using composer.

composer create-project -s dev contributte/webpack-skeleton acme

Install Composer dependencies: composer install or make install

Install NPM dependencies: npm install or make install

Now you have application installed. It's time to run it.

Startup

Backend

The easiest way is to use php built-in web server.

php -S 0.0.0.0:8000 -t www

Or via make dev.

Then visit http://localhost:8000 in your browser.

Frontend

If you want to compile assets, call npm run start.

If you need watcher, call npm run watch, it will watch your codebase and rebuild assets.

If you want build for production, call npm run build.

If you want start webpack development server with HRM, call npm run dev, open http://localhost:8080 in your browser.

Or via make webpack.

Features

• 👍 Nette 3+
• 👍 Webpack 5+
  • 🎉 extracting JS to single bundle
  • 🎉 extracting CSS to single file
  • 🎉 more bundles (front/admin/vendor)
• 👍 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

Screenshots

Development

See how to contribute to this package.

This package is currently maintaining by these authors.

---

Consider to support contributte development team. Also thank you for using this project.

webpack-skeleton's Issues

Roadmap

• ❓ pure sendPayload method
• ❓ dynamic snippets ( + snippetArea )
• ❓ Vue.js component

Add webpack-dev-server?

Hi,
how would you add webpack-dev-server to php webserver?
Will this example show how to do it?

error while build

vagrant@homestead:~/projects_local/playground/nette-webpack-example$  node -v
v14.15.3
vagrant@homestead:~/projects_local/playground/nette-webpack-example$
vagrant@homestead:~/projects_local/playground/nette-webpack-example$     npm run build

> [email protected] build /home/vagrant/projects_local/playground/nette-webpack-example
> cross-env NODE_ENV=production webpack --mode production --progress --colors

Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'chunkFilter'. These properties are valid:
   object { test?, include?, exclude?, cache?, cacheKeys?, parallel?, sourceMap?, minify?, terserOptions?, extractComments?, warningsFilter? }
ValidationError: Invalid options object. Terser Plugin has been initialized using an options object that does not match the API schema.
    at validate (/home/vagrant/projects_local/playground/nette-webpack-example/node_modules/terser-webpack-plugin/node_modules/schema-utils/dist/validate.js:96:11)
    at new TerserPlugin (/home/vagrant/projects_local/playground/nette-webpack-example/node_modules/terser-webpack-plugin/dist/index.js:40:30)
    at Object.<anonymous> (/home/vagrant/projects_local/playground/nette-webpack-example/webpack.config.js:313:5)
    at Module._compile (/home/vagrant/projects_local/playground/nette-webpack-example/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (/home/vagrant/projects_local/playground/nette-webpack-example/node_modules/webpack-cli/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `cross-env NODE_ENV=production webpack --mode production --progress --colors`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vagrant/.npm/_logs/2020-12-18T22_13_10_824Z-debug.log

[Example] Vue.js

• simple component
• simple API endpoint

[Example] Two separated bundles for front/admin modules

Is it worth separating front/admin assets or just bundle them all together in one app.js?

Etc in admin there are datetimepicker and other plugins that are not used on front -> i want to save user's data usage.

Simple inject js/css into @layout.latte

Hi Guys, thanks for really good pattern to use Webpack with Nette. In this example, you have defined the paths to css/html in @layout.latte file. But, If I want to generate hash to filename during each build of app, I need to generate the links to js/css in header/footer dynamically.

I know, that somebody created Nette plugin for this functionality. The plugin reads list of files from JS map file and adds it into the header.

But what do you think about solution to use webpack-html-plugin and make new functionality to this plugin (add basePath option), which will replace the path from webpack output (ONLY in this plugin) to defined path, for example:

webpack.output.basepath will be defined to
webpack.output.basepath: './' (relative path)

and then webpack html plugin basePath will be defined to
basePath: '{$basePath}/dist/'

...and {$basePath} will be replaced to absolute path by nette/latte.

please, check line 228
https://gist.github.com/acqsk/e0f840798f8b3f09135a77add56df140

rendered html by your plugin from template, line 5 and line 213
https://gist.github.com/acqsk/46779f1d5c5441573c04496a8ef3ad30

What do you think about it? It's a good or stupid idea? ...or do you have another simple idea to make this?