Simplify Plain JS example (#3534)

SAP · Nov 27, 2023 · 17acfb4 · 17acfb4
1 parent da8e291
commit 17acfb4
Show file tree

Hide file tree

Showing 12 changed files with 1,257 additions and 2,736 deletions.
diff --git a/core/examples/luigi-example-js/.gitignore b/core/examples/luigi-example-js/.gitignore
@@ -2,9 +2,4 @@
 
 # dependencies
 /node_modules
-/public/luigi-client
-/public/luigi-core
-/public/fundamental-styles
-/public/fonts
-/public/luigi-config.js
-/dist
+/public/fonts
diff --git a/core/examples/luigi-example-js/README.md b/core/examples/luigi-example-js/README.md
@@ -7,28 +7,17 @@ This is the JS-based sample application which runs with the Luigi framework.
 
 ## Development
 
-
 To run this application, follow these steps:
 
 
-1. If you do not have Live Server installed, use this command to install it.
-    ```bash
-    npm install -g live-server
-    ```
-
-2. Install dependencies.
+1. First, install the dependency `server` to serve your application locally by running the following:
     ```bash
     npm install
     ```
-
-3. Build modules.
-    ```bash
-    npm run build
-    ```
 
-4. Start the application .
+2. Start the application .
     ```bash
     npm run start
     ```
 
-5. Open it in your browser by going to [http://127.0.0.1:8080/](http://127.0.0.1:8080/).
+5. Open it in your browser by going to [http://127.0.0.1:3000/](http://127.0.0.1:3000/).
diff --git a/core/examples/luigi-example-js/package-lock.json b/core/examples/luigi-example-js/package-lock.json
diff --git a/core/examples/luigi-example-js/package.json b/core/examples/luigi-example-js/package.json
@@ -4,19 +4,11 @@
   "description": "",
   "main": "public/index.html",
   "scripts": {
-    "build": "webpack --entry ./luigi-config.js --mode production",
-    "start": "live-server --entry-file=index.html public",
+    "start": "serve public",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "ISC",
   "dependencies": {
-    "@luigi-project/client": "^1.25.1",
-    "@luigi-project/core": "^1.25.1",
-    "@sap-theming/theming-base-content": "^11.1.44",
-    "copy-webpack-plugin": "^11.0.0",
-    "fundamental-styles": "^0.23.1",
-    "webpack": "^5.75.0",
-    "webpack-cli": "^5.0.0",
-    "live-server": "1.2.2"
+    "serve": "^14.2.1"
   }
 }
diff --git a/core/examples/luigi-example-js/public/index.html b/core/examples/luigi-example-js/public/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title></title>
+    <title>Luigi App</title>
     <meta
       name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
@@ -10,14 +10,13 @@
       href="https://unpkg.com/@sap-theming/[email protected]/content/Base/baseLib/sap_fiori_3/css_variables.css"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="./luigi-core/luigi.css" />
+    <link rel="stylesheet" href="https://unpkg.com/@luigi-project/core@2.7.2/luigi.css" />
     <link rel="icon" href="favicon.ico" type="image/x-icon" />
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-
-    <script src="./luigi-core/luigi.js"></script>
+    <script src="https://unpkg.com/@luigi-project/[email protected]/luigi.js"></script>
 
     <script src="./luigi-config.js"></script>
   </body>

diff --git a/...examples/luigi-example-js/luigi-config.js → ...s/luigi-example-js/public/luigi-config.js b/...examples/luigi-example-js/luigi-config.js → ...s/luigi-example-js/public/luigi-config.js
@@ -13,13 +13,10 @@ Luigi.setConfig({
             pathSegment: 'sample1',
             label: 'First',
             icon: 'nutrition-activity',
-            viewUrl: '/views/sample1.html'
-          },
-          {
-            pathSegment: 'sample2',
-            label: 'Second',
-            icon: 'paper-plane',
-            viewUrl: '/views/sample2.html'
+            viewUrl: '/views/sample1.html',
+            loadingIndicator: {
+              enabled: false
+            }
           },
           {
             category: { label: 'Links', icon: 'cloud' },

diff --git a/core/examples/luigi-example-js/public/views/home.html b/core/examples/luigi-example-js/public/views/home.html
@@ -1,26 +1,18 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link
-      href="https://unpkg.com/@sap-theming/[email protected]/content/Base/baseLib/sap_fiori_3/css_variables.css"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="/fundamental-styles/fundamental-styles.css" />
+    <script src="https://cdn.jsdelivr.net/npm/@luigi-project/[email protected]/luigi-client.js"></script>
     <style type="text/css">
       .fd-panel {
         padding: 15px;
       }
     </style>
   </head>
   <body>
-    <section class="fd-section">
-      <div class="fd-section__header">
-        <h1 class="fd-section__title">Home</h1>
-      </div>
-      <div class="fd-panel" id="init-text"></div>
-    </section>
-
-    <script type="text/javascript" src="/luigi-client/luigi-client.js"></script>
+    <div>
+      <h1>Home</h1>
+    </div>
+    <div class="fd-panel" id="init-text"></div>
     <script type="text/javascript">
       LuigiClient.addContextUpdateListener(updatedContext => {
         document.getElementById('init-text').textContent = 'Luigi Client updated.';

diff --git a/core/examples/luigi-example-js/public/views/sample1.html b/core/examples/luigi-example-js/public/views/sample1.html
@@ -1,28 +1,19 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link
-      href="https://unpkg.com/@sap-theming/[email protected]/content/Base/baseLib/sap_fiori_3/css_variables.css"
-      rel="stylesheet"
-    />
-    <link rel="stylesheet" href="/fundamental-styles/fundamental-styles.css" />
     <style type="text/css">
       .fd-panel {
         padding: 15px;
       }
     </style>
   </head>
   <body>
-    <script type="text/javascript" src="/luigi-client/luigi-client.js"></script>
-
-    <section class="fd-section">
-      <div class="fd-section__header">
-        <h1 class="fd-section__title">Sample 1</h1>
-      </div>
-      <div class="fd-panel">
-        Luigi ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
-        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
-      </div>
-    </section>
+    <div>
+      <h1>Sample 1</h1>
+    </div>
+    <div class="fd-panel">
+      Luigi ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
+      tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+    </div>
   </body>
 </html>
diff --git a/core/examples/luigi-example-js/public/views/sample2.html b/core/examples/luigi-example-js/public/views/sample2.html
diff --git a/core/examples/luigi-example-js/webpack.config.js b/core/examples/luigi-example-js/webpack.config.js
diff --git a/docs/application-setup.md b/docs/application-setup.md
@@ -40,7 +40,7 @@ You can see how to quickly start an Angular Luigi application in this video:
 ## Application setup without a framework
 
 <!-- add-attribute:class:warning -->
-> **NOTE:** You need a development server capable of hosting Single Page Applications. The recommended server is Live Server.
+> **NOTE:** You need a development server capable of hosting Single Page Applications. The recommended server is Serve.
 
 1. Use the following installer to create a directory for your application, install Luigi, make assets available, and start your local server:
 
@@ -53,35 +53,27 @@ or execute these commands manually to get the same result:
 ```bash
 mkdir my-new-app && cd my-new-app
 
-npm init -y > /dev/null
+# Download the package.json
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/package.json > package.json
 
-# add "start" command to the package.json file. This command is split into 2 lines on purpose!
-sed 's/"scripts": {/"scripts": {\
-\   "buildConfig":"webpack --entry .\/src\/luigi-config\/luigi-config.es6.js --output-path .\/public\/assets --output-filename luigi-config.js --mode production",/1' package.json > p.tmp.json && mv p.tmp.json package.json
-sed 's/"scripts": {/"scripts": {\
-\   "start":"live-server --entry-file=index.html public",/1' package.json > p.tmp.json && mv p.tmp.json package.json
 
-npm i -save @luigi-project/core @luigi-project/client fundamental-styles @sap-theming/theming-base-content live-server webpack webpack-cli @babel/core @babel/preset-env babel-loader 
+# Install packages and create folder structure
+npm i 
 mkdir -p public/assets
 mkdir -p src/luigi-config
 
-# download assets
-curl https://raw.githubusercontent.com/SAP/luigi/main/scripts/setup/assets/index.html > public/index.html
-curl https://raw.githubusercontent.com/SAP/luigi/main/scripts/setup/assets/luigi-config.es6.js > src/luigi-config/luigi-config.es6.js
-curl https://raw.githubusercontent.com/SAP/luigi/main/scripts/setup/assets/basicMicroFrontend.html > public/assets/basicMicroFrontend.html
-
+# download assets from core/examples folder
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/favicon.ico > public/favicon.ico
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/logo.png > public/logo.png
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/index.html > public/index.html
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/luigi-config.js > public/luigi-config.js
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/views/home.html > public/views/home.html
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/views/sample1.html > public/views/sample1.html
 
-cp -r node_modules/\@luigi-project/core public/luigi-core
-cp -r node_modules/\@luigi-project/client public/luigi-client
-cp -r node_modules/fundamental-styles/dist public/fundamental-styles
-cp -r node_modules/@sap-theming/theming-base-content public/theming-base-content
-
-echo "Building config with command: npm run buildConfig"
-npm run buildConfig
-
-echo "Running live-server with command: npm run start"
+echo "Running server with command: npm run start"
 npm run start
 
+
 ```
 <!-- accordion:end -->
 

diff --git a/scripts/setup/no-framework.sh b/scripts/setup/no-framework.sh
@@ -14,31 +14,20 @@ echo ""
 
 mkdir $folder && cd $folder
 
-npm init -y > /dev/null
-
-# add "start" command to the package.json file. This command is split into 2 lines on purpose!
-sed 's/"scripts": {/"scripts": {\
-\   "buildConfig":"webpack --entry .\/src\/luigi-config\/luigi-config.es6.js --output-path .\/public\/assets --output-filename luigi-config.js --mode production",/1' package.json > p.tmp.json && mv p.tmp.json package.json
-sed 's/"scripts": {/"scripts": {\
-\   "start":"live-server --entry-file=index.html public",/1' package.json > p.tmp.json && mv p.tmp.json package.json
-
-npm i -save @luigi-project/core @luigi-project/client fundamental-styles @sap-theming/theming-base-content live-server webpack webpack-cli @babel/core @babel/preset-env babel-loader 
-mkdir -p public/assets
-mkdir -p src/luigi-config
-
-# download assets
-curl https://raw.githubusercontent.com/SAP/luigi/main/scripts/setup/assets/index.html > public/index.html
-curl https://raw.githubusercontent.com/SAP/luigi/main/scripts/setup/assets/luigi-config.es6.js > src/luigi-config/luigi-config.es6.js
-curl https://raw.githubusercontent.com/SAP/luigi/main/scripts/setup/assets/basicMicroFrontend.html > public/assets/basicMicroFrontend.html
-
-
-cp -r node_modules/\@luigi-project/core public/luigi-core
-cp -r node_modules/\@luigi-project/client public/luigi-client
-cp -r node_modules/fundamental-styles/dist public/fundamental-styles
-cp -r node_modules/@sap-theming/theming-base-content public/theming-base-content
-
-echo "Building config with command: npm run buildConfig"
-npm run buildConfig
-
-echo "Running live-server with command: npm run start"
+# download the package.json
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/package.json > package.json
+
+npm i 
+mkdir -p public/
+mkdir -p public/views
+
+# download assets from core/examples folder
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/favicon.ico > public/favicon.ico
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/logo.png > public/logo.png
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/index.html > public/index.html
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/luigi-config.js > public/luigi-config.js
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/views/home.html > public/views/home.html
+curl https://raw.githubusercontent.com/SAP/luigi/main/core/examples/luigi-example-js/public/views/sample1.html > public/views/sample1.html
+
+echo "Running server with command: npm run start"
 npm run start