SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式

简介: SAP Spartacus UI 服务器端渲染的调试启动方式 - debug 模式

首先确认你已经熟悉这篇文章的启动方式:SAP Spartacus develop branch 的服务器端渲染启动方式

第一步

添加一个新的 build script,把 --configuration production 去掉:

"build:libs:dev": "ng build core && ng build storefrontlib && yarn build:schematics && yarn build:user && yarn build:cart && yarn build:order && yarn build:checkout && yarn build:asm && yarn build:tracking  && concurrently --kill-others-on-fail -m 4 yarn:build:organization yarn:build:product yarn:build:product-configurator yarn:build:storefinder yarn:build:smartedit yarn:build:qualtrics yarn:build:assets yarn:build:incubator yarn:build:cdc yarn:build:cds yarn:build:setup yarn:build:digital-payments",

然后 yarn build:libs:dev, 这会在 dist 文件夹下生成对应的文件夹。

里面全是 build 之后的文件:

构建完成:

第二步

然后构建 StorefrontApp:

yarn build:dev

显式加上 --configuration development

最后 StorefrontApp 文件夹里的构建结果:

第三步

“build:ssr:dev”: “env-cmd --no-override -e dev,b2c,$SPA_ENV ng run

storefrontapp:server:jerrydev”, – 注意,后面通过验证发现,这个配置行不通

确保生成了对应的 source code map 文件:

最后启动失败:

解决办法:还是用 production 这个 configuration:

只要把 sourceMap 设成 true 就会 out of memory.

所以这一步还是只能 fallback 成标准的 yarn build:ssr

最后 yarn serve:ssr:dev 启动:

现在就可以开始调试了。上图是应用在浏览器环境里的调试。

如果修改了代码之后,可以使用下面的命令行,重新构建:

一行命令让 Spartacus 源代码修改之后重新构建

set SSR_TIMEOUT=1981231&& yarn build:libs:dev&& yarn build:dev&& yarn build:ssr&& yarn serve:ssr:dev

相关文章
|
3天前
|
JavaScript 搜索推荐 前端开发
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
理解服务器端渲染(SSR):提高网页性能与SEO的秘籍
|
4天前
|
存储 供应链 前端开发
Spartacus home page 渲染时,就会读取 carousel 里的 product 数据
Spartacus home page 渲染时,就会读取 carousel 里的 product 数据
11 1
|
5天前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
5天前
|
JavaScript 前端开发 搜索推荐
Vue 的服务器端渲染(SSR)和客户端渲染(CSR)在渲染过程、性能、用户体验等方面都存在显著的区别
【5月更文挑战第8天】Vue 的 SSR 和 CSR 在渲染上有明显差异。SSR 服务器端生成 HTML 返回给浏览器,提供更快首屏加载和更好的 SEO,但增加服务器负担。CSR 客户端渲染,首次加载可能较慢,但交互更流畅,开发更简单。两者各有优劣,需根据项目需求权衡选择。
14 2
|
5天前
|
数据采集 资源调度 前端开发
React的服务器端渲染:使用ReactDOMServer进行高效页面预渲染
【4月更文挑战第25天】使用ReactDOMServer,React支持服务器端渲染以实现高效预渲染。通过在Node.js环境中将React组件转化为HTML字符串,减少客户端JavaScript负载和渲染时间。优点包括更快首屏加载、改善SEO和兼容无JavaScript环境,但也会增加服务器负载、复杂性和状态管理挑战。开发者需根据项目需求平衡SSR和CSR。
|
5天前
|
缓存 JavaScript 前端开发
Vue的服务端渲染:Vue的服务器端渲染(SSR)技术详解
【4月更文挑战第24天】Vue的服务器端渲染(SSR)能解决SPA的首屏加载和SEO问题。SSR预渲染HTML,提升首屏速度,改善SEO,提供更好的用户体验。Nuxt.js是Vue的SSR框架,简化开发流程。但SSR增加服务器压力,开发成本高,且需处理缓存问题。选择SSR需权衡优劣。本文旨在帮助理解Vue SSR原理、优势及实践方法。
|
5天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
21 0
|
5天前
|
数据采集 搜索推荐 JavaScript
Next.js进阶:静态生成、服务器端渲染与SEO优化
【4月更文挑战第13天】Next.js是现代Web开发的关键框架,以其对静态生成(Static Generation)、服务器端渲染(Server-Side Rendering)和SEO的支持而备受青睐。本文深入解析了这三个核心特性的原理、应用和最佳实践。静态生成在构建时生成HTML,适用于内容更新少的页面,通过`getStaticProps`和`getStaticPaths`获取静态数据。服务器端渲染则在每次请求时生成HTML,适合实时数据,使用`getServerSideProps`获取服务器端数据。
32 0
|
5天前
什么是 SAP ABAP 里的 Subscreen
什么是 SAP ABAP 里的 Subscreen
18 1
什么是 SAP ABAP 里的 Subscreen
http://www.vxiaotou.com