How to configure Hybris smartedit to use spartacus in static webserver - spartacus-storefront

When configuring Hybris smartedit to use compiled Spartacus in static web server (Azure Storage Account in my case), smartedit gets URL references to /cx-preview?cmsTicketId=.... This results in HTTP 404, as there is no such file available.
I have compiled Spartacus by running
ng build
Currently, my workaround is to have a dedicated virtual machine running
ng serve
And having all the needed dependencies installed. But this is suitable only for development usage.
I have followed instructions in https://sap.github.io/cloud-commerce-spartacus-storefront-docs/smartEdit-setup-instructions-for-spartacus/#page-title, apart for the last step, as Azure Storage Account can only hold static content.
Spartacus UI works fine from Azure Storage Account

It does look like your Site table hasn't been updated to reflect the location to your storefront: "/cx-preview" clearly shows a default URL from when smartedit and stortefront are in same origin within the SAP Hybris commerce platform.
So make sure to update the previewUrl field of the Site table for your given site.
Here:
https://sap.github.io/cloud-commerce-spartacus-storefront-docs/smartEdit-setup-instructions-for-spartacus/#configuring-smartedit-to-work-with-a-spartacus-storefront
you will find, amongst other things:
. Ensure that the WCMS Cockpit Preview URL is set correctly.
. In Backoffice, in WCMS > Website > your site, click the WCMS Properties tab.
. Set the WCMS Cockpit Preview URL to your Spartacus web site. For this example, it
. should point to https://localhost:4200
Hope this helps.

Related

[Spartacus ]Posting from Iframe to OCC endpoint configuration issue

I am integrating 3ds for spartacus. The payment provider requires a POST back from an iframe they serve. I post back to an endpoint in OCC. I have added the origin to the allow-from corsfilter.commercewebservices.allowedOrigins=http\://localhost\:4200 https\://localhost\:4200 https\://test.domain.com
The XSSFilter is blocking the request because of this configuration xss.filter.header.X-Frame-Options=SAMEORIGIN, this property is set in hybris platform. When I remove this property manually, the POST is working properly. When set it to an empty string (xss.filter.header.X-Frame-Options=) chrome rejects the requests because of an erroneous header.
How I can I remove this property in configuration, without manually removing the property every time the server restarts?
I am running locally at the moment, but should run on both ccv2 and on custom infrastructure. Hopefully without changes to the http server (nginx/apache) as this is part of a library that we want to publish for spartacus.

How to enable Azure CDN for Azure storage blob static website?

After enabling static website on Azure storage, I have deployed an index.html to the $web blob container. https://<name>.<zone>.web.core.windows.net works fine.
To add custom domain with HTTPS support, it is recommended that we use Azure CDN to access the blobs. On the linked page to enable that, the page says
During preview of static websites support in Azure Storage, select "custom origin" from the "origin type" drop down menu to add your storage web endpoint. In Azure Portal, you will need to do this from your CDN Profile instead of directly in your storage account.
So I selected Custom Origin as the origin type and made <name>.<zone>.web.core.windows.net as the origin hostname.
However, trying to access https://<cdnendpointname>.azureedge.net/ is sending me to 404 Not Found page.
It looks like it was a propagation issue. The CDN endpoint started working fine after 30 mins.

How to enable offline support when using HTML5 history api

What are the best practices (and how to go about doing it) to support offline mode when using html5 history api for url rewrites?
For example, (hypothetically) I have a PWA SPA application at https://abc.xyz which has internationalization built in. So when I visit this link, the Vue router (which ideally could be any framework - vue, react, angular etc.) redirect me to https://abc.xyz/en.
This works perfectly when I am online (ofcourse, the webserver is also handling this redirect so that app works even if you directly visit the said link).
However, its a different story when I am offline. The service worker caches all resources correctly so when I visit the URL https://abc.xyz everything loads up as expected. However, now if I manually type the URL to https://abc.xyz/en, the app fails to load up.
Any pointers on how to achieve this?
Link to same question in github: https://github.com/vuejs-templates/pwa/issues/188
Yes, this is possible quite trivially with Service Workers. All you have to do is to configure the navigateFallback property of sw-precache properly. It has to point to the cached asset you want the service worker to fetch if it encounters a cache miss.
In the template you posted, you should be good to go if you configure your SWPrecache Webpack Plugin as follows:
new SWPrecacheWebpackPlugin({
...
navigateFallback: '/index.html'
...
})
Again, it is absolutely mandatory that the thing you put inside navigateFallback is cached by the Service Worker already, otherwise this will fail silently.
You can verify if everything was configured correctly by checking two things in your webpack generated service-worker.js:
the precacheConfig Array contains ['/index.html', ...]
in the fetch interceptor of the service worker (at the bottom of the file), the variable navigateFallback is set to the value you configured
If your final App is hosted in a subdirectory, for example when hosting it on Github pages, you also have to configure the stripPrefix and replacePrefix Options correctly.

Add authentication for certain pages of Jekyll site

I have a certain page my Jekyll site that I only want to make available to people from my organization's domain (call it example.com).
Am I correct in my understanding that it's not possible to restrict access to certain pages because — as is the nature of a static site  — everything has already been served at once?
I'm aware of the jekyll-auth plugin to authenticate users against GitHub, but my situation would require that authentication through Google sign-in.
Jekyll is just a static site generator, so anything related to authentication will depend on what you have available on the webserver that is hosting the site.
Take a look at the Jekyll Google Auth plugin for example:
https://github.com/apcj/jekyll-google-auth
It's basically a trick... Anytime a request comes in for a page, they run it through Sinatra (using the _site folder as the static file folder, just as public would be normally), and authenticate it using apcj/sinatra-google-auth.
So in this case, you know that your webserver must have Sinatra for this authentication method to work.
One alternative would be to password protect your Jekyll site with HTTP basic auth. Aerobatic provides such a feature for static sites hosted with Bitbucket. And yes, you can protect only certain directories of the site.
https://www.aerobatic.com/blog/password-protect-a-jekyll-site
Disclaimer: I'm one of the founders of Aerobatic
You can use Netlify to add authentication to any static site not just jekyll. Deploy your site for free on netlify and use their identity widget..

Connection String to start Storefront

I have deployed the Virto Commerce Manager to IIS successfully. However when I build the website and start Storefront I get an error when I click Let's Start.
What should the connectionString be in my Web.config?
I tried:
"http://localhost/admin/api/"
For the default installation should be http://localhost/admin/api/. Can you open the admin site? It looks like you trying to access /admin and it is not opening and it also looks like you running using IIS Express intead of just IIS.
How did you setup Virto Commerce (which guide or approach did you use)?
Your connection string is correct, but the Let's start link is not. It should point to the absolute URL http://localhost/admin while it points to relative /admin instead, so the full link is http://localhost:53032/admin and it is invalid.
You can navigate to http://localhost/admin manually and import the sample catalog. After that the storefront should show the home page with products.