theme development – What is the optimal method for displaying full custom app project demo’s on a WordPress blog?
I want to create a blog for writing programming tutorials, and I’d like to be able to demo the projects on the site itself.
For example: let’s say I have a React project that I wrote a blog post about. Now I want the readers to be able to see a live demo of it on the same domain as the blog, either a subdomain like ‘demo.blog.com/react-app’ or a subdirectory like ‘blog.com/demo/react-app’. I’d also like to list all demo’s on a page like ‘blog.com/demo’.
The idea I have so far
I was thinking about placing all projects inside their own folders inside a dedicated demo folder somewhere in the wp-content or theme directory. Then I would create a custom post type called ‘Demo’ with possibly a custom field to store the demo folder name and a template for it (single-demo.php). Then on that template I would redirect to the demo folder based on the custom field value to get the right directory, and serve the index.html in that directory.
Then, I can create a relationship between blog posts and demo’s and when a user clicks on a link to the demo they should be automatically redirected to the index.html inside that demo folder, which will then load all assets and serve the project. Also, this will essentially bypass the WordPress header and footer functions and just show the project as it was intended (without css or js from the blog site).
Am I overcomplicating things? Is there a reason that, as far as I can tell, popular programming blogs like css-tricks don’t have a similar setup and stick to using embedded codepens? I think codepens are great for demonstrating simple snippets or parts of a project, but for displaying a full project I guess you need a more dedicated setup.
So, all in all, am I on the right track here? Am I missing some important things? And in your opinion, what would be the best way to do this in a dynamic and streamlined way?