feat: kenx-vite plugin for SSR and react support integration

examples/react-ssr-ts/.config/assets.yml

@@ -0,0 +1,35 @@
+assets:
+  - key: 'default'
+    plugin: '@ckenx/kenx-fastify-assets'
+    # Assets storage configuration
+    # - cloud: connect to online space storage (CDN)
+    # - local: use same file system as the project
+    storage:
+      type: 'cloud'
+      client:
+        key: '[env]:STORAGE_CLIENT_KEY'
+        secret: '[env]:STORAGE_CLIENT_SECRET'
+        version: 'latest'
+      spaces:
+        - endpoint: '[env]:STORAGE_ENDPOINT'
+          baseURL: '[env]:STORAGE_BASE_URL'
+          region: '[env]:STORAGE_REGION'
+          bucket: '[env]:STORAGE_BUCKET'
+
+    # Asset upload management configuration
+    # Settings change based on the used asset 
+    # handler plugin
+    upload:
+      maxFileSize: 1024 # The max file size in bytes
+      # Authorized file mime types
+      mimeTypes:
+        - 'image/*'
+        - 'application/octect-stream'
+
+    # Static assets server configuration
+    static:
+      - root: './public'
+        options:
+          prefix: '/static'
+          acceptRange: true
+          cacheControl: false

examples/react-ssr-ts/.config/databases.yml

@@ -0,0 +1,48 @@
+# Databases configuration
+databases:
+  # Use on a connection string
+  - type: 'mongodb'
+    plugin: '@ckenx/kenx-mongodb'
+    key: 'default'
+    # Automatically connect the database during 
+    # the project deployment.
+    autoconnect: true
+    uri: 'mongodb://127.0.0.1:27017/Temp'
+
+  # Or user connection parameters
+  - type: 'mysql'
+    plugin: '@ckenx/kenx-mysql'
+    key: 'mysql-db'
+    options:
+      host: 'localhost'
+      port: 3306
+      database: 'TestDB'
+      # Authentication credentials: It's strongly 
+      # recommended to keep this information in 
+      # the .env file
+      auth:
+        user: 'root'
+        password: 'password'
+
+      # Connection pools help reduce the time spent 
+      # connecting to the MySQL server by reusing a 
+      # previous connection, leaving them open instead 
+      # of closing when you are done with them.
+      pool:
+        waitForConnections: true
+        connectionLimit: 10
+        # Max idle connections, the default value is 
+        # the same as `connectionLimit`
+        maxIdle: 10
+        # Idle connections timeout, in milliseconds, 
+        # the default value 60000
+        idleTimeout: 60000
+        queueLimit: 0
+        enableKeepAlive: true
+        keepAliveInitialDelay: 0
+
+  # Use on a connection string
+  # - type: 'redis'
+  #   plugin: '@ckenx/kenx-redis'
+  #   key: 'redis-db'
+  #   uri: 'redis://121.0.0.1:25061'

examples/react-ssr-ts/.config/frameworks.yml

@@ -0,0 +1,27 @@
+# Application frameworks configuration
+frameworks:
+  - type: 'express'
+    plugin: '@ckenx/kenx-express'
+    key: 'express-app'
+    bodyParser: 
+      extended: true 
+      limit: '1mb'
+    session: '[sessions]:default'
+    assets: '[assets]:default'
+
+  - type: 'fastify'
+    plugin: '@ckenx/kenx-fastify'
+    key: 'fastify-app'
+    session: '[sessions]:default'
+    assets: '[assets]:default'
+    routing:
+      # Specify the plugin use to handle routing
+      plugin: '@ckenx/kenx-routing'
+      profile:
+        appname: '[env]:APPNAME'
+        version: '[env]:API_VERSION'
+        status: '[env]:API_STATUS'
+
+      ratelimit:
+        enable: true
+        maxRPS: 60000

examples/react-ssr-ts/.config/index.yml

@@ -0,0 +1,28 @@
+# Enable typescript
+typescript: true
+
+# Project directory
+directory:
+  base: './src'
+  # Directory structure patterns (Optional)
+  #
+  # Default pattern: Developer have full control over the directory
+  # - `-`
+  #
+  # Defined patterns: The application auto-load this directories 
+  # - `mvc`: Model View Controller
+  pattern: '-'
+
+# Automatically injects dependencies in your services
+autowire: true
+
+# Additional configurations
+__extends__: [
+  'assets',
+  'servers',
+  'sessions',
+  'security',
+  'databases',
+  'frameworks',
+  'translations'
+]

examples/react-ssr-ts/.config/security.yml

@@ -0,0 +1,26 @@
+# Integrity & security settings
+security:
+  - type: 'firewall'
+    protocol: 'https'
+
+  # Easy way to control access for large sections of your site
+  # Note: Only the *first* access control that matches will be used
+  - type: 'access-control'
+    routing:
+      - { path: ^/admin, roles: ROLE_SUPER_USER }
+      - { path: ^/dashboard/*, roles: ROLE_USER }
+      - { path: ^/register/*, roles: IS_AUTHENTICATED_ANONYMOUSLY }
+
+  # Activate different ways to authenticate
+  # Email address login method
+  - type: 'auth'
+    method: 'email'
+    key: 'email-auth'
+    enable: false
+
+  # # Single Sign-on login method
+  # - type: 'auth'
+  #   method: 'SSO'
+  #   key: 'sso-auth'
+  #   plugin: '@oauth'
+  #   enable: true

examples/react-ssr-ts/.config/servers.yml

@@ -0,0 +1,50 @@
+# Application servers configuration
+servers:
+  # HTTP server configurations
+  - type: 'http'
+    plugin: '@ckenx/kenx-http'
+    key: 'default' # Optional value
+    HOST: 0.0.0.0
+    PORT: '[env]:HTTP_PORT'
+    application: '[frameworks]:express-app'
+
+  # Socket.io server configurations
+  - type: 'socketio'
+    plugin: '@ckenx/kenx-socketio'
+    bindTo: 'http:default'
+    adapter: '[databases]:redis-db'
+    options:
+      cookie: false
+      allowEIO3: true
+      serveClient: true
+      connectTimeout: 15000
+
+  # Vite server configurations
+  - type: 'vite'
+    plugin: '@ckenx/kenx-vite'
+    # HOST: 0.0.0.0
+    # PORT: '[env]:VITE_PORT'
+    bindTo: 'http:default'
+    builder: true
+    options:
+      root: './src/views'
+      # Whether your application is a Single Page Application (SPA), a Multi 
+      # Page Application (MPA), or Custom Application (SSR and frameworks with 
+      # custom HTML handling):
+      #
+      # 'spa': Include HTML middlewares and use SPA fallback. 
+      #        Configure `sirv` with single: true in preview
+      # 'mpa': Include HTML middlewares
+      # 'custom': Disable Vite's own HTML serving logic so parent 
+      #            server can take control. This requires creating 
+      #            Vite server in middleware mode by setting
+      #            `server: { middlewareMode: true }`
+      appType: 'custom' # spa, mpa, custom
+      test:
+        globals: true
+        # 'happy-dom' or 'jsdom' for a DOM-like environment
+        environment: 'jsdom'
+        setupFiles:
+          - ../test/ui.test.ts
+      plugins:
+        - vite.plugins

examples/react-ssr-ts/.config/sessions.yml

@@ -0,0 +1,66 @@
+# Application session configuration
+sessions:
+  - key: 'default'
+    # Specify the plugin use to handle 
+    # application session:
+    # 
+    # NOTE:
+    # The support for plugin is enable by the targeted
+    # framework plugin itself, so others can use any stack
+    # and style they want to process differents aspects
+    # of the express application.
+    #
+    plugin: '@ckenx/kenx-fastify-session'
+    # Development environment
+    development:
+      # Using `in-memory` storage
+      type: 'in-memory'
+      # Session configuration/options depending assigned by application
+      # framework specifications.
+      #
+      # NOTE: Recommand storing these information in .env file
+      #       using references as follow:
+      #        
+      #       Eg. `[env]:VARIABLE_NAME`
+      options:
+        name: '[env]:APPNAME' # Refer to environment variable
+        secret: '[env]:SESSION_SECRET' # Refer to environment variable
+        saveUninitialized: true
+        resave: false
+        cookie:
+          httpOnly: true
+          secure: false
+          maxAge: 864000000 # Expires in a day: 24 * 3600 * 1000
+
+    # Production environment
+    production:
+      # Using deployed `database` store
+      type: 'store'
+      store:
+        # Store library provider: Use to establish
+        # the client connection to the store.
+        provider: 'redis-store'
+        # Set database connection configuration in `databases.yml` 
+        # file with a unique `key`, then provide that key here as
+        # a reference
+        database: '[databases]:redis-db'
+        # Extra store configuration
+        options:
+          prefix: 'session:'
+          ttl: 86400 # Time-To-Live when connection is inactive
+      # Session configuration/options depending assigned by application
+      # framework specifications.
+      #
+      # NOTE: Recommand storing these information in .env file
+      #       using references as follow:
+      #        
+      #       Eg. `[env]:VARIABLE_NAME`
+      options:
+        name: '[env]:APPNAME' # Refer to environment variable
+        secret: '[env]:SESSION_SECRET' # Refer to environment variable
+        saveUninitialized: true
+        resave: true
+        cookie:
+          httpOnly: true
+          secure: true
+          maxAge: 864000000 # Expires in a day: 24 * 3600 * 1000

examples/react-ssr-ts/.config/translations.yml

@@ -0,0 +1,2 @@
+# Intl translation configurations
+translations:

examples/react-ssr-ts/autorun

@@ -0,0 +1,53 @@
+const Kenx = require('../../packages/node/dist/index.js').default
+
+if( !Kenx ) {
+  console.error('Kenx-node is not available')
+  process.exit(1)
+}
+
+/**
+ * Define the list of the resources configured in
+ * `.config` to take over after kenx setup completed.
+ *
+ * Definition symtax:
+ *
+ * - 'http' or 'http:default': Return the only configured
+ *    http server available
+ *
+ * - `database:primary`: Return database client configured
+ *    with `key: "primary"`
+ *
+ * - `webserver:*`: Return all configured webserver servers
+ *    as an array
+ */
+const takeover = [
+  /**
+   * Include started http server defined in
+   * your .config/servers.yml
+   */
+  'http',
+
+  /**
+   * Include started http server defined in
+   * your .config/servers.yml
+   */
+  'socketio',
+
+  /**
+   * Include a mounted database client defined in
+   * your .config/databases.yml
+   */
+  'database:*'
+];
+
+( async ({ autoload, dispatch }) => {
+  /**
+   * Autoload Chenx services
+   */
+  await autoload()
+
+  /**
+   * Initialize & map setup services to project components
+   */
+  await dispatch( takeover )
+} )( new Kenx() )

examples/react-ssr-ts/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "kenx-app",
+  "version": "1.0.0",
+  "description": "Kenx web application for NodeJS",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "ckenx build",
+    "dev": "ckenx run --dev",
+    "start": "ckenx run --prod",
+    "start:alt": "NODE_ENV=production node autorun"
+  },
+  "dependencies": {
+    "@ckenx/kenx-express": "*",
+    "@ckenx/kenx-fastify": "*",
+    "@ckenx/kenx-fastify-assets": "*",
+    "@ckenx/kenx-fastify-session": "*",
+    "@ckenx/kenx-http": "*",
+    "@ckenx/kenx-mongodb": "*",
+    "@ckenx/kenx-mysql": "*",
+    "@ckenx/kenx-routing": "*",
+    "@ckenx/kenx-socketio": "*",
+    "@ckenx/kenx-vite": "*",
+    "@vitejs/plugin-react": "^4.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0"
+  }
+}

examples/react-ssr-ts/public/doc.txt

@@ -0,0 +1 @@
+Empty document