[update] changed default jet-start port to vite default; moved most of webpack related data to the Webpack configuration page

kullias · kullias · commit 8245c29375f8 · 2024-02-19T13:01:44.000+03:00
diff --git a/SUMMARY.md b/SUMMARY.md
@@ -28,13 +28,10 @@
 * [Part IV - Toolchain](part-iv-toolchain/README.md)
   * [Deploying and Testing](part-iv-toolchain/deploying-and-testing.md)
   * [Big App Development](part-iv-toolchain/big-app-development.md) 
-  * [Developing Big App with Webpack](part-iv-toolchain/developing-big-app-with-webpack.md)  
   * [Using TypeScript](part-iv-toolchain/using-typescript.md)
-  * [Configuring Webpack](part-iv-toolchain/webpack-configuration.md)
   * [Using with Vite](part-iv-toolchain/using-with-vite.md)
-  * [Importing Webix as Module](part-iv-toolchain/importing-webix-as-module.md)
-  * [Using Webix Jet without Webpack](part-iv-toolchain/using-webix-jet-without-webpack.md)
-  * [Changing the Port of the Dev Server](part-iv-toolchain/working-with-package.json.md)
+  * [Using with Webpack](part-iv-toolchain/webpack-configuration.md)
+  * [Using Webix Jet without Vite or Webpack](part-iv-toolchain/using-webix-jet-without-webpack.md)
   * [\[DEPRECATED\] WJet Utility for Faster Prototyping](part-iv-toolchain/wjet-utility-for-faster-prototyping.md)
 * [API Reference](api/README.md)
   * [JetApp API](api/jetapp-api.md)
diff --git a/getting-started.md b/getting-started.md
@@ -22,7 +22,7 @@ yarn
 yarn start
 ```
 
-Next, open `http://localhost:8080` in the browser. You will see the application interface. Let's have a look at what it has inside.
+Next, open `http://localhost:5173` in the browser. You will see the application interface. Let's have a look at what it has inside.
 
 ## The Application Structure
 
diff --git a/migration-from-jet-0.x.md b/migration-from-jet-0.x.md
@@ -22,12 +22,11 @@ npm install
 npm start
 ```
 
-* open the app at _localhost:8080_.
+* open the app at _localhost:5173_.
 
 ## Troubleshooting
 
-* If you get `can not resolve` error in webpack, make sure you add the alias and the path to the lib in question in **webpack.config.js**. [Check the docs](https://webpack.js.org/configuration/resolve/).
-* If something else goes wrong, use the [starter jet repo](https://github.com/webix-hub/jet-start) as the base for migration and replace the sources folder as above.
+* If something goes wrong, use the [starter jet repo](https://github.com/webix-hub/jet-start) as the base for migration and replace the sources folder as above.
 
 ## Migrating views
 
diff --git a/part-i-basic-usage/creating-apps.md b/part-i-basic-usage/creating-apps.md
@@ -143,6 +143,7 @@ You can read these sections of Part II:
 * [App Config](../part-ii-webix-jet-in-details/app-config.md)
 * [Routers](../part-ii-webix-jet-in-details/routers.md)
 * [JetApp API](../api/jetapp-api.md)
+* [Vite Configuration](part-iv-toolchain/using-with-vite.md)
 * [Webpack Configuration](../part-iv-toolchain/webpack-configuration.md)
 
 ### Footnotes
diff --git a/part-ii-webix-jet-in-details/app-config.md b/part-ii-webix-jet-in-details/app-config.md
@@ -157,54 +157,6 @@ export default class TopView extends JetView {
 
 [Check out the demo &gt;&gt;](https://github.com/webix-hub/jet-demos/blob/master/sources/viewresolve.js)
 
-### Code Splitting
-
-You can [split your code into bundles](https://webpack.js.org/guides/code-splitting/) and load them on demand \(lazy loading\), which can greatly influence the initial loading time of the application. Lazy loading of app code is possible in Webix Jet with the help of a custom **app.views** handler. Where you can import the bundle on demand [\[2\]](app-config.md#2).
-
-```javascript
-// myapp.js
-import "./styles/app.css";
-import {JetApp, EmptyRouter, HashRouter } from "webix-jet";
-
-export default class MyApp extends JetApp{
-    constructor(config){
-        const defaults = {
-            router: BUILD_AS_MODULE ? EmptyRouter : HashRouter,
-            debug: !PRODUCTION,
-            start: "/top/layout",
-            views: (name) => {
-                if (name === "modules.clients") //sources/modules/
-                    return import("modules/clients");
-
-                // load all other modules with default strategy
-                return name;
-            }
-        };
-
-        super({ ...defaults, ...config });
-    }
-}
-
-if (!BUILD_AS_MODULE){
-    webix.ready(() => new MyApp().render() );
-}
-```
-
-In **webpack.config.js**, you can define the chunk naming scheme \(the _chunkFilename_ property\) in **output**:
-
-```javascript
-// webpack.config.js
-...
-output: {
-    ...
-    filename: "[name].js",
-    chunkFilename: "[name].bundle.js"
-    // will be 'clients.bundle.js' in this case
-}
-```
-
-[Check out the demo &gt;&gt;](https://github.com/webix-hub/jet-demos/blob/master/sources/bundles.js)
-
 ### Custom Logic of Creating Views
 
 You can also implement your own logic of view creating. Define **views** as a function for that:
diff --git a/part-ii-webix-jet-in-details/routers.md b/part-ii-webix-jet-in-details/routers.md
@@ -67,7 +67,7 @@ webix.ready(() => {
 });
 ```
 
-Next, configure http redirects by adding a fallback. For webpack dev server from a starter kit, this can be done in _webpack.config_:
+Next, configure http redirects by adding a fallback. If you use the Webpack dev server from a starter kit, this can be done in _webpack.config_:
 
 ```javascript
 // webpack.config.js
@@ -98,10 +98,10 @@ webix.ready(() => {
 
 In your _index.html_ you should set the relative URL with the same prefix:
 
-```markup
+```html
 <!-- index.html -->
 <script type="text/javascript">
-    if(document.location.pathname == "/index.html")
+    if (document.location.pathname == "/index.html")
         document.location.href = "/myapp";
 </script>
 ```
diff --git a/part-iii-practical-tasks/creating-complex-widgets.md b/part-iii-practical-tasks/creating-complex-widgets.md
@@ -106,31 +106,3 @@ export default class MyView extends JetView {
 }
 ```
 
-## Dynamic Widget Loading
-
-If you want to load custom widget code on demand, you can split your code and import the bundles with widget code when it is needed. For example, widgets can be imported in [config\(\)](../part-ii-webix-jet-in-details/views.md#config) of a Jet view:
-
-```javascript
-// views/statistics.js
-import {JetView} from "webix-jet";
-export default class StatisticsView extends JetView{
-    config(){
-        const widgets = import(/* webpackChunkName: "widgets" */ "modules/customgrid");
-        return widgets.then(() => {
-
-            return { rows:[
-                { type:"header", template:"Sales 2018" },
-                { view:"custom-grid" }
-            ]};
-
-        });
-    }
-}
-```
-
-{% hint style="info" %}
-This works for both custom Webix widgets and Jet apps as custom widgets.
-{% endhint %}
-
-[Check out the demo &gt;&gt;](https://github.com/webix-hub/jet-demos/blob/master/sources/bundles.js)
-
diff --git a/part-iv-toolchain/big-app-development.md b/part-iv-toolchain/big-app-development.md
@@ -4,7 +4,7 @@
 
 If you develop a large app, it has sense to split it into multiple modules, which can be developed and tested separately and combined into a single app on the last step of development.
 
-Starting with Webix Jet 3.0, the toolchain has been migrated to Vite, and it is now possible to build apps as modules using Vite (read about building with Webpack [here](https://webix.gitbook.io/webix-jet/part-iv-toolchain/developing-big-app-with-webpack)). If you have an existing project that uses Webpack and you wish to migrate to Vite, follow these steps:
+Starting with Webix Jet 3.0, the toolchain has been migrated to Vite, and it is now possible to build apps as modules using Vite (read about building with Webpack [here](part-iv-toolchain/webpack-configuration.md)). If you have an existing project that uses Webpack and you wish to migrate to Vite, follow these steps:
 
 - provide [vite.config.js](https://github.com/webix-hub/jet-start/blob/vite-standalone/vite.config.js)
 - set env variables via the [.env](https://github.com/webix-hub/jet-start/blob/vite-standalone/.env) file
diff --git a/part-iv-toolchain/developing-big-app-with-webpack.md b/part-iv-toolchain/developing-big-app-with-webpack.md
diff --git a/part-iv-toolchain/importing-webix-as-module.md b/part-iv-toolchain/importing-webix-as-module.md
diff --git a/part-iv-toolchain/using-webix-jet-without-webpack.md b/part-iv-toolchain/using-webix-jet-without-webpack.md
@@ -1,6 +1,6 @@
-# Using Webix Jet without Webpack
+# Using Webix Jet without Vite or Webpack
 
-If you really want to, you can drop Webpack and include Jet source code directly to the page. ```npm``` contains two versions of Jet JS code:
+If you really want to, you can drop Vite or Webpack and include Jet source code directly to the page. ```npm``` contains two versions of Jet JS code:
 
 - ES6 in *es6/jet.js* (used by default),
 - ES5 in *es5/jet.js* (use this).
diff --git a/part-iv-toolchain/webpack-configuration.md b/part-iv-toolchain/webpack-configuration.md
diff --git a/part-iv-toolchain/working-with-package.json.md b/part-iv-toolchain/working-with-package.json.md
