Setting up ShortPixel AI with Frontity

🙋Get Help
#1

✓ Description of your issue
I want to implement ShortPixel AI with Frontity. On request, they have provided me with standalone JS that should work with Frontity but when I try to use it, gives an error. How to do it correctly?

✓ System info → npx frontity info

## System:
 - OS: Windows 10 10.0.19042
 - CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
 - Memory: 1.65 GB / 7.81 GB
## Binaries:
 - Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
 - npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
## Browsers:
 - Chrome: Not Found
 - Edge: Spartan (44.19041.423.0), Chromium (86.0.622.69)
 - Internet Explorer: 11.0.19041.1
## npmPackages:
 - @frontity/core: ^1.9.0 => 1.9.0 
 - @frontity/head-tags: ^1.0.7 => 1.0.7 
 - @frontity/html2react: ^1.4.0 => 1.4.0 
 - @frontity/tiny-router: ^1.2.2 => 1.2.2 
 - @frontity/wp-source: ^1.9.1 => 1.9.1 
 - forgotten-developer: file:packages/forgotten-developer => 1.0.0 
 - frontity: ^1.12.0 => 1.12.0 
 - prismjs: ^1.22.0 => 1.22.0 
 - react-icons: ^3.11.0 => 3.11.0 
 - yarn: ^1.22.10 => 1.22.10 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

✓ Specific errors you’re getting in the terminal

  SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/


webpack built client 2d295c2e7b1b3aa03c3e in 7126ms
i ｢wdm｣: Child client:
                 Asset      Size        Chunks             Chunk Names
        code.module.js  13.9 KiB          code  [emitted]  code
  divakshcom.module.js  8.72 MiB    divakshcom  [emitted]  divakshcom
vendors~code.module.js   357 KiB  vendors~code  [emitted]  vendors~code
 + 1 hidden asset
Child server:
    Asset      Size  Chunks             Chunk Names
server.js  11.5 MiB    main  [emitted]  main
i ｢wdm｣: Compiled successfully.

  ReferenceError: window is not defined
  at Theme (webpack-internal:///./packages/forgotten-developer/src/components/index.js:18:170)
  at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
  at reaction (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
  at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:21:16)
  at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:2319)
  at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:396:122)
  at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:1199)
  at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:55)
  at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:470:116)
  at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:68:243)

✓ A repository or codesandbox with the code of your project
- https://github.com/Divaksh/forgotten-developer/tree/dev

✓ A deployed version of your site
http://divaksh.com/

✓ The URL of your WP REST API
api.divaksh.com/wp-json

✓ Additional information: Setup guide for ShortPixel AI
https://shortpixel.com/ai-js

#3

Hi @Divaksh,

Can you please specify the steps to follow to get that error? Maybe a Loom video may help to provide this explanation

Also, take into account that Frontity Apps are Isomorphic React Apps, which means that the React code will be executed in the server to generate the HTML for the page requested and also it will be executed in the client for a React process called hydration, so React can take control of app from that moment (improving loading times and user experience)

In one of our latest Frontity Talks we explain how to debug a Frontity App in both the server and the client and the whole idea of Frontity Isomorphic React Apps

The error ReferenceError: window is not defined seems to be related to that the server is executing a piece of code that is using window that is an object only available on the client side

Hope this helps

1 Like
#5

It is just a twostep process as per instructions given by ShortPixel

You can integrate our Adaptive Images and CDN service into any website using the standalone JS snippet and some quick modifications in the markup.

1. INCLUDE THIS JAVASCRIPT IN THE HEAD OF YOUR PAGE:

        (function(w, d){
            var b = d.getElementsByTagName('head')[0];
            var s = d.createElement("script");
            var v = ("IntersectionObserver" in w) ? "" : "-compat";
            s.async = true; // This includes the script as async.
            s.src = "https://cdn.shortpixel.ai/assets/js/bundles/spai-lib-bg-webp" + v + ".0.9.min.js";
            w.spaiData = {
                key: "jsai",
                quality: "lossy",
                sizeFromImageSuffix: true
            };
            b.appendChild(s);
        }(window, document));

2. HTML CHANGES

Replace all src attributes of the HML markup with data-spai-src, for example:

<img class="aligncenter size-full wp-image-1794" data-spai-src="https://shortpixel.com/img/robot_lookleft_wink.png" alt="robo winks" width="600" height="933" />

I’m still not able to add the given JS in head without error window is not defined.

#6

First, thank you for the detailed response. This is gentle bump!! :smiley:

Please correct me if I’m wrong, this is my first web development project. I’ve learnt a lot from you guys. :slight_smile:

I want to clarify that I have watched the video twice and tried to implement the given JS in the useEffect of post.js.(To be honest, I do not know where to add code for CSR, I did it watching the video) It didn’t throw any error, but it didn’t work as it require data-spai-src markup to work. I couldn’t figure out, how to replace ‘src’ with data-spai-src for all images.

One more confusion I have is the purpose of CDN and Adaptive Images both are speeding up the website (same as the frontity) and improve SEO performance. Images are the most expensive part of website considering the data it requires loading. The concept of Adaptive Images fixes it and deliver the webp converted images based on the screen sizes for additional data savings and the way it works in the case of ShortPixel, ImgHaste and other CDN + AI service provider is, they append their URL before the actual image URL and deliver the images from their CDN providers and modify image sizes with parameters in the URL in real-time. Like this https://cdn.shortpixel.ai/spai/w_870+q_lossless+ret_img+to_webp/https://upyogigyan.com/wp-content/uploads/2017/02/creatine.png
In case of Frontity, I can’t use the given JS at the server side because it requires window but search engines look for the SSR version if I’m not wrong? If yes then it doesn’t resolve the SEO benefits of AI. In this case, what should be done to implement it on server side?

Kindly clarify my doubts.

#8

Hi @Divaksh,

In my opinion what you’re trying to do is kind of tricky as this ShortPixel code doesn’t seem to be really prepared to work in a React app. Making it work with Frontity shouldn’t be much more different than making it work with any other React app

Regarding this, you can try to create a custom processor that return this extra attribute for every <img> found. With this processor added to the @frontity/html2react package, any use of this package to render content will use that processor and return custom html (or React component) when matching the processor pattern.

Again, this is something that doesn’t really have to do with Frontity, but with trying to use a tool not prepared for React or even SSR React. I would ask for them for support.

Sorry I cannot be of more help here

1 Like