In a previous post there was a tutorial on how to embed an app into a WordPress (WP) page. This was somewhat cumbersome to achieve.

Given that it’s WP and Svelte in this case, (Although it could be any framework Angular, React etc)the app can only really operate within the boundaries of the app effectively.

This means that if i have app embedded within WP, it can’t update things such as other sections of the screen eg. react to a button click or add some content to a section etc.

There are probably some hacks to achieve it but it will come back to bite you when you expect some content to change outside the app change detection mechanisms and nothing happens.

Enter the (good ol’) iframe

If we don’t need to interact with other items on the screen or the app is self contained then this seems like a good option.

As we’ve seen in the previous post about embedding an app in WP is cumbersome, not only for setting it up but maintaining and updating the app is a pain.

Another approach is to separate these out completely.

The task is to develop an app locally and create a set of build distribution files. Upload these to the server and setup an iFrame that will point to the code files and everything should work magically! Let’s see!

Upload the files

The hosting company used has an option to automatically setup WP. When FTP’ing into the file system the WP installation is slightly different to the standard manual files.

To start with i’m going to place the files under `httpdocs/my-apps/magic-card-trick`. Then in the iframe the src will be set to `https://someverynew.co.uk/my-apps/magic-card-trick`

I predict already this won’t work as WP will guide all traffic to its index file.

Results:

As expected the error page – page not found is the content.

The fix

WP will intercept all traffic, in this case it uses the .htaccess. Looking at this file you will see a bunch of lines and something like this:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Another rule is needed to point to the new app code files:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /

# Allow direct access to files inside /my-apps/
RewriteCond %{REQUEST_URI} ^/my-apps/
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

The app dist files were also placed in the same folder as the .htaccess which in the case was the httpdocs/<wp-installation>/public

After a reload this now points to the new app but the js and css files cannot be found:

This error indicates that its trying to access files from /assets/…

Because we have this within the WP file structure the files won’t exist so the base url needs to be set in vite.config.js to /my-apps/magic-card-trick/

import {defineConfig} from 'vite'
import {svelte} from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  base: '/my-apps/magic-card-trick/',
  plugins: [svelte()],
})

Now when we reload the page the errors have gone! Magic!

Speaking of magic below is the iframe with a little magic card trick written in Svelte:

Conclusion

Compared to embedding the two sources together this nicely separates the concerns of WP and the app code.

It’s much easier to maintain the app code as it’s just a case of updating the code directly in /my-apps folder.

There is no messing around adding WP short-codes, updating child themes adding conditionals to the functions.php etc.

A problem area is that it can be harder to achieve good responsiveness eg if going from desktop to mobile your elements may stack well natively but in an iFrame this can cause some difficulties. Also if the height is dynamic then it will require some extra logic to work that out.

The aim of this post was twofold. Use an app via an iframe and secondly learn some Svelte.

The Svelte code was quite nice. Being used to Angular and React i found Svelte had good mix of both paradigms. It’s quite flexible like React and i get good automatic change detection like Angular.

Finally, how did the magic trick work i hear you scream? Like any magician, one thal shal not reveal ones secrets!

Thanks for reading!