Hello Word

Generate hello Bundle :

Command console to Generate new bundle : generate:bundle name path

$ nodefony generate:bundle hello src/bundles

# Or Interactive Mode

$ nodefony
  ?  Nodefony CLI :  Generater
?  Nodefony CLI :  (Use arrow keys)
❯ Generate New Bundle
  Generate New Controller
  Generate New Service
  Generate New Entity
  Generate New Nodefony Project
  Generate Openssl Certificates
  Generate Haproxy Configuration
  Generate Nginx Configuration
  Generate letsEncrypt Webroot Configuration

Example files system after Generate Bundle :

ls -l src/bundles/hello-bundle
total 456
drwxr-xr-x    4 cci  staff     136 13 sep 15:43 Command
drwxr-xr-x    3 cci  staff     102 13 sep 15:43 Entity
drwxr-xr-x    6 cci  staff     204 13 sep 15:43 Resources
drwxr-xr-x    3 cci  staff     102 13 sep 15:43 build
drwxr-xr-x    3 cci  staff     102 13 sep 15:43 controller
drwxr-xr-x    3 cci  staff     102 13 sep 15:43 doc
-rw-r--r--    1 cci  staff     628 13 sep 15:43 helloBundle.js
drwxr-xr-x  438 cci  staff   14892 13 sep 15:43 node_modules
-rw-r--r--    1 cci  staff  217359 13 sep 15:43 package-lock.json
-rw-r--r--    1 cci  staff     926 13 sep 15:43 package.json
-rw-r--r--    1 cci  staff       1 13 sep 15:43 readme.md
drwxr-xr-x    3 cci  staff     102 13 sep 15:43 services
drwxr-xr-x    2 cci  staff      68 13 sep 15:43 src
drwxr-xr-x    3 cci  staff     102 13 sep 15:43 tests

AUTO REGISTRATION :

The bundle generation engine auto registre generated bundle in framework :
During the generation of a bundle nodefony uses a temporary yml file ./config/generatedConfig.yml

./config/generatedConfig.yml
system:
  bundles:
  hello: src/bundles/hello-bundle

If the bundle is to be used in a durable way It is preferable to register the bundles in framework config file : ./config/config.yml

./config/config.yml
system:
  bundles:
    hello: file:src/bundles/hello-bundle

Generated VIEW :

src/bundles/hello-bundle/Resources/views/index.html.twig
{% extends '/app/Resources/views/base.html.twig' %}

{% block title %}Welcome {{kernel.name}}! {% endblock %}

{% block stylesheets %}

  {{ parent() }}

  <!-- WEBPACK BUNDLE -->
  <link rel='stylesheet' href='{{CDN("stylesheet")}}/hello-bundle/assets/css/hello.css' />

{% endblock %}

{% block body %}
  <div class='container'>
  <div class='row'>
  {{readme}}
  </div>
  </div>
{% endblock %}

{% block javascripts %}

  {{ parent() }}

  <!-- WEBPACK BUNDLE -->
  <script src='{{CDN("javascript")}}/hello-bundle/assets/js/hello.js'></script>

{% endblock %}

Generated Controller :

src/bundles/hello-bundle/controller/defaultController.js
module.exports = class defaultController extends nodefony.controller {

	constructor (container, context){
		super(container, context);
	}

	/**
	 *
	 *	@method indexAction
	 *
	 */
	indexAction (){
		try {
			return this.render("hello-bundle::index.html.twig", {
				name: "hello-bundle"			});
		}catch(e){
			throw e;
		}
	}
};

WATCHER FILES DURING DEVELOPMENT :

The bundle generation engine build bundle config with node.js watcher configuration
In developement mode is very usefull to auto-reload files as controllers , views , routing , translations
without having to reboot the server.

./src/bundles/hello-bundle/Resources/config/config.yml
  #
  #  WATCHERS
  #
  #    Listen to changes, deleting, renaming files and directories of different components
  #
  #    For watch all components
  #
  #      watch:			true            # by default services false !
  #    or
  #      watch:
  #        controllers     : true
  #        config         : true		# only  routing
  #        views          : true
  #        translations   : true
  #        webpack        : true
  #        services       : true

  watch       : true

WEBPACK MODULE BUNDLER :

The bundle generation engine build bundle config with a predefined webpack configurations
In this way webpack is very usefull to manage all assets of bundle
In developement mode watch is very usefull to auto-compile webpack module bundle
without having to reboot the server.

./src/bundles/hello-bundle/Resources/config/webpack.config.js
module.exports = webpackMerge({
  context: context,
  target: "web",
  entry       : {
    hello  : [ "./js/hello.js" ]
  },
  output: {
    path: public,
    publicPath: publicPath,
    filename: "./js/[name].js",
    library: "[name]",
    libraryTarget: "umd"
  },
  externals: {},
  resolve: {},
  module: {
    rules: [{
      // BABEL TRANSCODE
      test: new RegExp("\.es6$|\.js$"),
      exclude: new RegExp("node_modules"),
      use: [{
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }]
    }, {
      // CSS EXTRACT
      test: new RegExp("\.(less|css)$"),
      use: [
        //'css-hot-loader',
        MiniCssExtractPlugin.loader,
        'css-loader',
        'less-loader'
      ]
    }, {
      // SASS
      test: new RegExp(".scss$"),
      use: [{
        loader: 'style-loader'
      }, {
        loader: 'css-loader'
      }, {
        loader: 'sass-loader'
      }]
    }, {
      // FONTS
      test: new RegExp("\.(eot|woff2?|svg|ttf)([\?]?.*)$"),
      use: 'file-loader?name=[name].[ext]&publicPath=/' + bundleName + "/assets/fonts/" +'&outputPath=/fonts/',
    }, {
      // IMAGES
      test: new RegExp("\.(jpg|png|gif)$"),
      use: 'file-loader?name=[name].[ext]&publicPath=/' + bundleName + "/assets/images/" +'&outputPath=/images/'
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "./css/[name].css",
      allChunks: true
    })
  ]
}, config);
./src/bundles/hello-bundle/Resources/config/webpack/webpack.dev.config.js
  // WEBPACK DEV CONFIGURATION
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const public = path.resolve(__dirname, "..", "..", "public");
  module.exports = {
    mode: "development",
    devtool: "source-map",
    resolve: {},
    plugins: [
      new CleanWebpackPlugin(['assets'], {
        verbose: kernel.debug,
        root: public
      })
      //new webpack.NamedModulesPlugin(),
      //new webpack.HotModuleReplacementPlugin()
    ]
  };

Start Nodefony to check new Bundle hello:

-d for debug mode
$ nodefony -d dev
 or
$ nodefony dev
Access to bundle route with URL : http://mydomain.com:5151/hello