change readme.md

media-store/README.md

@@ -16,18 +16,19 @@ It contains these folders and files, following our recommended project layout:
 
 - At first open a new terminal and run `npm run deploy`. It should create new sqlite source and fill initial data from `db/data`. You can browse database in any sqlite client
 - Run `cds watch`. This will start cds service on 4004 port in watch mode
-- Open `app` folder and run `npm run start`. This will start frontend dev server on 3000 port. It supports debug in chrome and hot reloading out of the box by create-react-app
+- Open `app-src` folder and run `npm install` and `npm run watch`. This will install dependencies and run frontend src files watcher. When you will change src files your bundles in app folder will re-compiled. Now you can enjoy development
-- Now all things are done for development
+
+### Best dev experience
+
+- You can use webpack-dev-server to rapid frontend development. Instead of running watcher in `app-src` do `npm run start`. This will start frontend dev server on 3000 port. Now your bundles will be hot reloaded, this means you do not need reload the page to see changes
 
 ## Deployment steps
 
 - Make sure you already have hanatrial instance in your cockpit dashboard (SAP Cloud Platform).
   Or if you are using hana instance - change it in mta.yaml config file from hanatrial to hana
 - Replace `"kind": "sql"` with `"kind": "hana"` in package.json require section
-- Make sure that current folder does not contain any previous `*.mtar` build file and `gen` folder
-  If exists - remove it
 - Run `cf login` for Cloud Foundry authentication
-- Open `app` folder and run `npm run build`. This will start create new production frontend bundles
+- Open `app-src` folder and run `npm install` if you are haven't done this and `npm run build`. This will create frontend production bundles in app subfolder
 - Run `mbt build -t ./`. This will create new build in `*.mtar` file
 - Run `cf deploy <.mtar file>` # for example, media-store_1.0.0.mtar
 - Now your services should be deployed with hanatrial instance and filled with initial data

media-store/mta.yaml

@@ -16,8 +16,6 @@ build-parameters:
       commands:
         - npm install
         - npx @sap/cds-dk build
-        - npm --prefix ./app-src install ./app-src
-        - npm run build --prefix ./app-src #This line runs the build script
 
 modules:
   # --------------------- SERVER MODULE ------------------------

media-store/server.js

@@ -1,9 +1,49 @@
 const cds = require("@sap/cds");
-const {
+
-  getDurationInMilliseconds,
+const getDurationInMilliseconds = (start) => {
-  getFormattedDateTime,
+  const NS_PER_SEC = 1e9; //  convert to nanoseconds
-  corsMiddleware,
+  const NS_TO_MS = 1e6; // convert to milliseconds
-} = require("./util/helpers");
+  const diff = process.hrtime(start);
+  return (diff[0] * NS_PER_SEC + diff[1]) / NS_TO_MS;
+};
+
+const getFormattedDateTime = () => {
+  let currentDateTime = new Date();
+  let formattedDateTime =
+    currentDateTime.getFullYear() +
+    "-" +
+    (currentDateTime.getMonth() + 1) +
+    "-" +
+    currentDateTime.getDate() +
+    " " +
+    currentDateTime.getHours() +
+    ":" +
+    currentDateTime.getMinutes() +
+    ":" +
+    currentDateTime.getSeconds();
+  return formattedDateTime;
+};
+
+const corsMiddleware = (req, res, next) => {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header(
+    "Access-Control-Allow-Methods",
+    "GET, PUT, PATCH, POST, DELETE, OPTIONS"
+  );
+  res.header(
+    "Access-Control-Allow-Headers",
+    "Origin, X-Requested-With, Content-Type, Accept, Authorization, Accept-Language"
+  );
+
+  //intercepts OPTIONS method
+  if ("OPTIONS" === req.method) {
+    //respond with 200
+    res.sendStatus(200);
+  } else {
+    //move on
+    next();
+  }
+};
 
 // handle bootstrapping events...
 cds.on("bootstrap", (app) => {

media-store/util/helpers.js

@@ -1,50 +0,0 @@
-const getDurationInMilliseconds = (start) => {
-  const NS_PER_SEC = 1e9; //  convert to nanoseconds
-  const NS_TO_MS = 1e6; // convert to milliseconds
-  const diff = process.hrtime(start);
-  return (diff[0] * NS_PER_SEC + diff[1]) / NS_TO_MS;
-};
-
-const getFormattedDateTime = () => {
-  let currentDateTime = new Date();
-  let formattedDateTime =
-    currentDateTime.getFullYear() +
-    "-" +
-    (currentDateTime.getMonth() + 1) +
-    "-" +
-    currentDateTime.getDate() +
-    " " +
-    currentDateTime.getHours() +
-    ":" +
-    currentDateTime.getMinutes() +
-    ":" +
-    currentDateTime.getSeconds();
-  return formattedDateTime;
-};
-
-const corsMiddleware = (req, res, next) => {
-  res.header("Access-Control-Allow-Origin", "*");
-  res.header(
-    "Access-Control-Allow-Methods",
-    "GET, PUT, PATCH, POST, DELETE, OPTIONS"
-  );
-  res.header(
-    "Access-Control-Allow-Headers",
-    "Origin, X-Requested-With, Content-Type, Accept, Authorization, Accept-Language"
-  );
-
-  //intercepts OPTIONS method
-  if ("OPTIONS" === req.method) {
-    //respond with 200
-    res.sendStatus(200);
-  } else {
-    //move on
-    next();
-  }
-};
-
-module.exports = {
-  getFormattedDateTime,
-  getDurationInMilliseconds,
-  corsMiddleware,
-};