I'm trying to get Spartacus to work with SSR. When opening the default URL, http://localhost:4200, the storefront renders, as expected, but only after I clear the site data first. When I attempt to browse the storefront, API calls fail with a 504 (Gateway timeout). Chrome dev tools indicates the error is happening in the service worker. At this point, I'm wondering if I configured Spartacus incorrectly. When running Spartacus using yarn start rather than yarn serve:ssr, I can load the home page and browse the site normally.
OS: Ubuntu 16.04.6 LTS
Chrome Version: 73.0.3683.75
Node version: 11.15.0
Angular CLI version: 8.3.8
Yarn version: 1.19.1
ng new ssr-spartacus-app --style=scss
cd ssr-spartacus-app
ng add #spartacus/schematics --baseUrl https://localhost:9002 --baseSite cmssiteuid --pwa --ssr
rm src/app/app.component.html
echo "<cx-storefront>Loading...</cx-storefront>" > src/app/app.component.html
yarn build:ssr
yarn serve:ssr
Before running yarn build:ssr, I made following change to the app.module.ts file:
Before
context: {
baseSite: ['cmssiteuid'],
},
After
authentication: {
client_id: 'mobile_android',
client_secret: 'secret',
},
context: {
urlParameters: ['baseSite', 'language', 'currency'],
baseSite: ['cmssiteuid'],
},
I also set anonymousConsents to false. With this set to true, I was getting a lot of CORs errors.
If been scratching my head with this for a little while now and I'm hoping someone with more knowledge of Spartacus' inner workings can shed some light on why Spartacus is behaving this way with SSR.
I'm not sure that I can give you some certain recipe to fix the issue, obviously I need more details and logs relates to your problem, but still, based on my experience I can share with you some tips and tricks about how we should play with such issues (which relates to SSR).
Some set of theory which relates to SSR
https://angular.io/guide/universal (you can feel free to use Angular official documentation as a primary source, cuz Spartacus uses Angular OOTB features to make it works)
https://sap.github.io/spartacus-docs/server-side-rendering-in-spartacus/
https://enable.cx.sap.com/tag/tagid/spartacus (SSR related videos)
Practical approaches for debugging SSR
You should observe and analyze console output during starting your application in Node.js
You can use SSR configuration from example Storefront application (https://github.com/SAP/spartacus/tree/develop/projects/storefrontapp) like a starting point, cuz OOTB SSR works like a charm
Something from Spartacus team https://sap.github.io/spartacus-docs/how-to-debug-server-side-rendered-storefront/
Common set of theory to ensure that application has been configured correctly
SAP Commerce Cloud configuration for working with Spartacus https://sap.github.io/spartacus-docs/installing-sap-commerce-cloud/
Take a look on the guide https://sap.github.io/spartacus-docs/building-the-spartacus-storefront-from-libraries/ to ensure, that your frontend application has correct configuration
Double check your configuration which B2cStorefrontModule is using (here you can find an example project here https://github.com/SAP/spartacus/tree/develop/projects/storefrontapp)
Take a look on Network and Console browser tabs and try to resolve all errors
did you turn off PWA?
Turn PWA off.
As soon as Spartacus is installed in PWA mode, a service worker is installed, and it serves a cached version of index.html, along with the js files. This results in SSR being completely skipped. The following steps describe how to turn off PWA:
Check that there are no service workers registered in your app. If you do find any service workers, remove them.
Turn PWA off in your app module configuration, as follows:
StorefrontModule.withConfig({
backend: {
occ: {
baseUrl: 'https://[your_enpdoint],
},
},
pwa: {
enabled: false,
},
};
Rebuild your local Spartacus libraries by running the following command:
yarn build:core:lib
Build your local Spartacus shell app by running the following command:
yarn build --prod
Build the SSR version of your shell app by running the following command:
yarn build:ssr
Start Spartacus with the SSR server by running the following command:
yarn serve:ssr
If you are getting 504 after hitting the API service you need to check your API logs.
IF you have err log:
{"instant":{"epochSecond":1644915623,"nanoOfSecond":929833000},"thread":"hybrisHTTP1","level":"ERROR","loggerName":"org.springframework.web.servlet.DispatcherServlet","message":"Context initialization failed","thrown":{"commonElementCount":0,"localizedMessage":"Error creating bean with name 'cartEntriesController': Injection of resource dependencies failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'defaultStockValidator' defined in ServletContext resource [/WEB-INF/config/v2/validators-v2-spring.xml]: Unsatisfied dependency expressed through constructor parameter 0: Could not convert argument value of type [de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade] to required type [de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade]: Failed to convert value of type 'de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade' to required type 'de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'de.hybris.platform.ycommercewebservices.stock.impl.DefaultCommerceStockFacade' to required type 'de.hybris.platform.commercewebservices.core.stock.CommerceStockFacade': no matching editors or conversion strategy found","message":"Error creating bean with name 'cartEntriesController': Injection of resource dependencies failed; nested exception is org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean with name 'defaultStockValidator'
You can try resolution:
Remove template extension ycommercewebservices extension from manifest.json, rebuild and redeploy with "Migrate Data" mode.
I built my app using Vue CLI3 with PWA. When I build for production the service worker fails to register.
I then decided to check if it was something I did or Vue CLI 3 out the box. I built a brand new app, built it and deployed it to AWS s3 with cloudfront. Even the brand new app without any changes fails to register the service worker with error: "The script has an unsupported MIME type ('text/plain')." and "Error during service worker registration: DOMException"
I've tried quite a few things other than listed below that google search results suggested but I end up with the same error.
I tried using the vue.config.js to load a custom worker in which I just copied the contents of the one that vue produces in a build.
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'public/service-worker.js'
},
themeColor: '#ffffff'
}
I have tried loading it from index.html also.
If I host it locally it registers without any issues
The file does get created and it's accessible from the console but for some odd reason unknown to me it does not want to register at all.
Has anyone had this problem before and how did you resolve this?
Hosted on AWS s3 & cloudfront with HTTPS enabled and using the default AWS certificates for testing.
$ vue --version
3.9.3
$ node --version
v12.7.0
$ npm --version
6.10.0
UPDATE
I found that when I upload to S3 using aws cli sync it changes all .js files content-type
Once I resolve this I will update my question again.
I've created a new site using Gridsome deployed with Netlify, but I can't get the site to appear when accessed. Instead, Netlify says:
Page Not Found
Looks like you've followed a broken link or entered a URL that doesn't exist on this site.
< Back to our site
I tried updating my build settings based on the instructions of the creator of the Gridsome starter template I'm using, but the site still doesn't display. I've also updated the js-yaml version.
I've gone through the questions/answers for similar questions on here, but I haven't been able to figure this out. I'm new to web development, and I'm sure I'm missing one or more things contributing to the issue.
My GitHub repo for this site.
The site.
I have the build log from Netlify. There are some errors in it. I don't want to put too much here, so here's a part from the end of the log.
12:18:36 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
12:18:36 PM: Error running command: Build script returned non-zero exit code: 1
12:18:36 PM: Failing build: Failed to build site
12:18:36 PM: Finished processing build request in 55.729813394s
A Gist for the whole build log.
Thanks so much for your help, #talves!
I was having trouble using the build commands because of being new to cli stuff and a permissions issue. I asked a friend about the build errors I was getting from Netlify, and he recommended I try removing and re-installing my node modules. Did that, still didn't work. I tried removing anything in the repo having to do with "journal" since Failed to render /journal kept appearing in the build log, but that didn't work either.
I googled ReferenceError: _objectSpread is not defined after update since that was in the build log after the journal error. I found a comment on an issue noting the same error message in the main Babel GitHub repo that suggested adding the following to the package.json file:
"resolutions": {
"#babel/core": "^7.5.4"
}
I added it, tried to build again, and it still failed but only gave me one error message it didn't show before—Error: SyntaxError: Unexpected string in JSON at position. I googled that message and got another issue on GitHub. A comment on the issue noted a missing comma.
I went back to my package.json file and found that I didn't add a comma to the bracket above the new "resolutions" snippet. I added the comma, tried to build again, and it worked 🤜💥✨ !
Sorry if this is long-winded! I thought it might be good to include my process on figuring this out in case others run into the same issues.
I am trying to work out how to deploy an aurelia app, it runs in development with au run. but I need to deploy it into a path which is not the root of the web-site. ie at '/site' not '/'
when I deploy I get an exception from the router: ERROR [app-router] Error: Route not found: /site/
I think it may be that I need to specify a baseURL in one or more places?
but can't see how I can:
make it work in the development environment at /
make it work in the deployed environment at /[any-site-path]
avoid building in knowledge of '/[any-site-path]' to my development environment or bundles, as the path wont be known until someone comes to deploy the code?
i found this question but that seems to apply to an out of date version of the code.
I am using Aurelia 1.0 and building using the au-cli
Any pointers would be useful.
Looks like this is a bug that has been fixed in a more recent version.
I have just gone through and applied the latest versions of:
"aurelia-bootstrapper": "^1.0.0" -> "^2.1.1"
"aurelia-cli": "^0.24.0" -> "^0.26.1"
"aurelia-tools": "^0.2.2" -> "^1.0.0"
And i can now deploy my application to a site sub folder without specifying any url content in the code or html files!
So I can satisfy all 3 of the criteria in my question.
Note the aurelia-cli update (0.25.0) requires a change to the main.(ts/js) as mentioned in the release notes.
Error:
Could not connect to develpment server.
Ensure the following:
- Node server is running and available on the same network - run 'npm start' from react-native root
- Node server URL is correctly set in AppDelegate
URL: http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true
I definitely am running npm start. Why isn't this running?
Now I am seeing this Error:
In file included from /Users/*******/f8app/node_modules/react-native-fbsdk/ios/RCTFBSDK/core/RCTFBSDKAccessToken.m:19:
/Users/*********/f8app/node_modules/react-native-fbsdk/ios/RCTFBSDK/core/RCTFBSDKAccessToken.h:21:9: fatal error:
'FBSDKCoreKit/FBSDKCoreKit.h' file not found
#import <FBSDKCoreKit/FBSDKCoreKit.h>
Does the project build succeed in Xcode?
Did you double-check these steps mentioned by facebook:
Make sure that the Facebook SDK frameworks are installed in
~/Documents/FacebookSDK.
Make sure that FBSDK[Core, Login, Share]Kit.framework show up in the
Link Binary with Libraries section of your build target's Build
Phases.
Make sure that ~/Documents/FacebookSDK is in the Framework Search
Path of your build target's Build Settings.
(https://github.com/facebook/react-native-fbsdk)
I myself had some troubles with the final step, but after retrying in a fresh project all worked fine
Example image from web showing the correct search path
If the project build doesn't succeed, you may want to try this.
You should first update your existing FBSDK (if any)
https://medium.com/#alberto.schiabel/react-native-on-xcode-beta-8-0-how-to-fix-initial-build-error-f0225c649850#.439zl5504