how to create production SSR build with sparatcus CCV2 - spartacus-storefront

some of my functonality is breaking in prdo build with SSR but working fine with local SSR build.
I am not able to create the exact prod build command.
here is my dev build command
"ng": "ng",
"sonar": "sonar-scanner",
"start": "ng serve",
"start:ssl": "ng serve --ssl --disable-host-check",
"build": "node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng build --prod",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"dev:ssr": "node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng run mystore:serve-ssr",
"serve:ssr": "node --max-http-header-size=16384 dist/mystore/server/main.js",
"serve:dev:ssr": "node --max-http-header-size=16384 dist/mystore-server/main.js",
"build:dev:ssr": "node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng build && node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng run mystore:server",
"build:ssr": "(cp server.prod.ts server.ts || copy server.prod.ts server.ts) && node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng build --prod && node --max-http-header-size=16384 ./node_modules/#angular/cli/bin/ng run mystore:server:production && mv dist/mystore-server/main.js dist/server.js || move dist\\mystore-server\\main.js dist\\server.js",
"prerender": "ng run mystore:prerender"
and the combined command I ran is
yarn build:dev:ssr & yarn serve:dev:ssr
I need how this replace Backend OCC url in the build

If you are using version 4.0, you may need to set the CX_BASE_URL as an environment variable when you build. There is an article here about the way the OCC url is handled between 3.0 and 4.0: https://chowdera.com/2021/08/20210807233507800o.html

Related

npm run dev is not working missing script how do I fix this

I have downloaded a zip file of a Barba project, unzipped opened it in VS then npm install yarn and then npm run dev.. I get error missing script dev. What am I missing ?
"name": "barba-starter-template",
"version": "1.0.0",
"description": "A simple starter template for setting up a ECMAScript 6 project with barba.js and webpack.",
"main": "app.js",
"scripts": {
"dev": "webpack-dev-server --mode development",
"build": "webpack --mode production",
"start": "node index.js"
},

how to correctly install a forked repo?

I forked this ngx-extended-pdf-viewer and I'm trying to install it.
The npm scripts in its package.json looks like this
"scripts": {
"ng": "ng",
"start": "ng serve --deployUrl=/path/ --host 10.0.1.3 --disable-host-check",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"unix-package": "ng b ngx-extended-pdf-viewer && rm -r dist && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
"showcase": "npm run unix-package && rm -r ../extended-pdf-viewer-showcase/node_modules/ngx-extended-pdf-viewer && cp -R dist/ngx-extended-pdf-viewer ../extended-pdf-viewer-showcase/node_modules/ngx-extended-pdf-viewer",
"issue": "npm run unix-package && rm -r ../ngx-extended-pdf-viewer-issues/issue317-ng9/node_modules/ngx-extended-pdf-viewer && cp -R dist/ngx-extended-pdf-viewer ../ngx-extended-pdf-viewer-issues/issue317-ng9/node_modules/ngx-extended-pdf-viewer",
"win-package": "ng b ngx-extended-pdf-viewer && rmdir dist /S && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
"release": "npm run unix-package && cd dist/ngx-extended-pdf-viewer && npm publish && cd .. && cd .. && ./createTag.sh && node ./increase-version-number.js",
"cypress": "./node_modules/.bin/cypress open"
},
But it's not being installed,The error looks like this
I've search around the internet, and based from the answers is to add a npm script prepare.
So i added a prepare script:
"unix-package": "ng b ngx-extended-pdf-viewer && rm -r dist && ng-packagr -p projects/ngx-extended-pdf-viewer/ng-package.json",
"prepare": "npm run unix-package"
What it basically does is it packages the one under projectsngx-extended-pdf-viewer subfolder.
I've also added a empty .npmignore as advised here since the /dist folder is added in .gitignore.
Still doesn't work as expected. Hope to get help from you guys, i've been stuck on this problem for days.
Sorry for answering late - but here's a discussion covering and answering your question: https://github.com/stephanrauh/ngx-extended-pdf-viewer/discussions/910

How to use concurrently in Yarn package?

The default package manager in my system is Yarn. I am trying to follow a course that uses NPM. Instead of shifting to NPM, I wanted to continue in Yarn but I got stuck in concurrently. How can I convert the following code for Yarn?
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm start --prefix frontend",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d",
yarn version for above code will be:
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "yarn --cwd frontend start",
"dev": "concurrently \"yarn server\" \"yarn client\"",
"data:import": "node backend/seeder",
"data:destroy": "node backend/seeder -d"
CWD - current working directory

Deploy Angular Universal SSR + .NET Core on Azure Devops

I have an app on azure devops with .net core and angular.
Now, I want to implement Angular Universal SSR.
Then, I did on my project:
ng add #nguniversal/express-engine --clientProject angular.io-example
My package.json is:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "npm run build:client-and-server-bundles && npm run compile:server",
"build:ssr": "npm run build:client-and-server-bundles && npm run compile:server",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "ng build --extract-css --stats-json && webpack-bundle-analyzer dist/stats.json",
"compile:server": "webpack --config webpack.server.config.js --progress --colors",
"serve:ssr": "node dist/server",
"build:client-and-server-bundles": "ng build --extract-css --prod && ng run Catevering:server:production"
}
Then, I can see on kudu the next structure files:
server
browser
server.js
[Check here my file structure][1]
Finally, I change the next line on my startup.cs file:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
By:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist/browser";
});
This way works on and my app is working. But, my app is not working as SSR.
In my localhost my app works as SSR with the next command:
node server.js
For that, I tried to change my code like this:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist/server.js";
});
But this is not working. However, my backend web api is working.
Someone can help me?
I need to run my app as SSR on azure devops.

jspm install github library

I'm tring to use https://github.com/intljusticemission/react-big-calendar after forking
I can jspm install -dev github:pcompassion/react-big-calendar fine.
But it's lacking lib directory, I think jspm is not running "scripts" in package.json (Is it supposed to do?)
"scripts": {
"clean": "rimraf lib",
"clean:examples": "rimraf examples/static",
"less": "lessc --autoprefix=\"ie >= 10, last 2 versions\" src/less/styles.less ./lib/css/react-big-calendar.css",
"assets": "cpy src/less/* lib/less",
"build": "npm run clean && babel src --out-dir lib && npm run assets && npm run less",
"build:examples": "npm run clean:examples && webpack --config webpack/examples.config.es6.js",
"build:visual-test": "webpack --config webpack/visual-test.es6.js",
"examples": "npm run clean:examples && webpack-dev-server --inline --hot --config webpack/examples.config.es6.js",
"lint": "eslint src --ext .jsx --ext .js",
"storybook": "start-storybook -p 9002",
"test": "npm run lint",
"tdd": "karma start",
"release": "release"
},
So I should go to the folder and mannualy do npm install ?