How to build a modern Svelte apps using Routify and Django ?

Manu The Blacker 🐊 — Sun, 03 Mar 2024 05:17:05 +0000

Svelte is a frontend framework for JavaScript that makes it easy to build web apps with ease.

Routify is a framework that adds support for SSR (Server-Side Rendering) to a Svelte project.

Django is a framework for the Python language, allowing the construction of full-stack apps.

I was working on a project that ran on Django, and up until now, I used static files to build my pages and vanilla JavaScript to animate elements on my page.

The issue I encountered was that the Django server had to process/generate the complete HTML code of my page before displaying it, sometimes causing the page to take longer to load.

In the end, I started some research to find a way to streamline my workflow. An API was built on the Django database to be used by other services throughout the project.

The API was set up. Now, to consume it, there was no possibility of running an infrastructure on Netlify/Vercel because the project had to use files internal to the enterprise.

Ultimately, I discovered Inertia.js who was used most to run ReactJS into server app ( Laravel/Django/Ruby ) without the need to run it as separate frontend.

In the background, it was django_vite who were doing most of the work.

My focus was on how to build a spa/ssr app to consume the API more easily.

So, the first step was to install django_vite and then configure it. I'll share my vite.config.js used to run Svelte.

You can find below the configuration used in routify, django to make everything works great.

Make sure to install Routify and in django enable a wildcard path so any request coming from your spa/ssr app is not detected as 404 page.

Follow this post : https://stackoverflow.com/questions/64883415/django-catching-all-urls-under-a-specific-name

After configuring it properly, make sure to run Vite in another window during development so that the files can be properly seen by the Django server.

Once you are ready for production, run the following commands in this order:

npm run build

python manage.py collectstatic

Find the configuration files ( vite.config.js|settings.py ) here : https://gist.github.com/manutheblacker/b58f13d12476f0dae742be2a2a50e019

How to generate a WP plugin based on React?

Manu The Blacker 🐊 — Mon, 20 Nov 2023 11:37:44 +0000

WordPress (WP) stands out as the most widely used application on the internet. However, as a software engineer involved in constructing WP websites, we frequently encounter issues where certain plugins in the WP repository do not align accurately with their detailed descriptions.

In such instances, the necessity arises to create custom plugins to fulfill specific goals. Our initial step is typically to seek resources that facilitate the initiation of our work and streamline the process of delivering results.

This is where the online tool, WPPB, comes into play. It simplifies the generation of boilerplate code for building WordPress plugins, addressing the challenges faced by developers in creating tailored solutions :

After completing the initial setup, you have the freedom to incorporate additional resources or customize your plugin according to your preferences.

Here is the architecture of our folder, just below explained the various folders :

admin: This section houses all logic related to the WP dashboard.
- css: Stores all CSS files related to the WP dashboard.
- js: Stores all JavaScript files related to the WP dashboard.
- class-example-admin.php: This is the main class of the plugin for the admin section.
- index.php: This file prevents the folder from being browsable from the internet.
includes: This section contains the part of the plugin responsible for loading all plugin logic in the correct order and for the right hooks. (Learn more about hooks here)
- class-example-activator.php: This class runs when the plugin is activated, suitable for tasks like creating SQL structures.
- class-example-deactivator.php: This class runs when the plugin is deactivated, suitable for tasks like deleting SQL structures.
- class-example-i18n.php: This class is responsible for the internalization of the plugin.
- class-example-loader.php: This class rewrites the default add_action and add_filter functions of WordPress.
- class-example.php: Loads the respective logic for the admin or the public.
languages: This is where the translations of the plugin in various languages are stored. You can use tools like Poedit or the Loco Translate plugin to facilitate this process.
public: This section contains the part of the plugin responsible for loading all plugin logic for the frontend.
- css: Stores all CSS files related to the public-facing side.
- js: Stores all JavaScript files related to the public-facing side.
- class-example-public.php: This is the main class of the plugin for the frontend.
- index.php: This file prevents the folder from being browsable from the internet.
other files (such as example.php and readme.txt) serve as a starting point for loading the plugin configuration into WordPress.

We initially intended to continue working with our existing plugin. However, after attending the annual World of Word, we recently discovered that the CMS is transitioning to become Gutenberg-based, built on top of ReactJS.

ReactJS, being a web framework that simplifies the development of web applications more efficiently and in less time, presents an exciting opportunity. Combining these two worlds into a single plugin can significantly enhance our development process.

The new goal is to evolve from the WPPB structure to create a generator capable of preparing a WordPress plugin for seamless integration with ReactJS.

For this purpose, a new tool has been developed and named WPRB, which stands for WordPress React Boilerplate. It maintains the same architecture as WPPB but integrates the appropriate tools from a React background.

You have the flexibility to include any NPM packages for the frontend in each section. Whether you prefer MaterialUI, Tailwind CSS, or any other, you just need to follow the same instructions and include it as if you were building a React app.

I will generate a new plugin using WPRB. This updated version essentially follows the same architecture as WPPB, but it now includes initial configuration files to kickstart a React app within it. The architecture within the plugin is the following :

admin: Stores all logic related to the WP dashboard.
- dist: Output after building by webpack; it contains the CSS and JS that will be loaded.
- src: Contains the source React code for the admin; you can use any of your favorite libraries here.
- class-example-admin.php: The main class of the plugin for the admin section.
- index.php: This file prevents the folder from being browsable from the internet.
includes: This section contains the part of the plugin responsible for loading all plugin logic in the correct order and for the right hooks. (Learn more about hooks here)
- class-example-activator.php: This class runs when the plugin is activated, suitable for tasks like creating any SQL structure.
- class-example-deactivator.php: This class runs when the plugin is deactivated, suitable for tasks like deleting any SQL structure.
- class-example-i18n.php: This class is responsible for the internalization of the plugin.
- class-example-loader.php: This class rewrites the default add_action and add_filter functions of WordPress.
- class-example.php: Loads the respective logic for the admin or the public.
languages: This is where the translations of the plugin in various languages are stored. You can use tools like Poedit or the Loco Translate plugin to achieve this.
public: This section contains the part of the plugin responsible for loading all plugin logic for the frontend.
- dist: Output after building by webpack; it contains the CSS and JS that will be loaded.
- src: Contains the source React code for the public; you can use any of your favorite libraries here.
- class-example-admin.php: The main class of the plugin for the admin section.
- index.php: This file prevents the folder from being browsable from the internet.
other files (such as example.php and readme.txt) serve as a starting point for loading the plugin configuration into WordPress.

Once you've grasped the structure, simply run yarn install or npm install at the root of the plugin to install the necessary dependencies. After this step, you're ready to go.

That's all for this explanation. If you're interested in enhancing or contributing to this work, feel free to fork this repository: https://github.com/homescriptone/WordPress-Plugin-React-Boilerplate. It contains the base code used to create and deliver these functionalities. Happy coding!

How to use online VS Code editor alongside your GitHub repo ?

Manu The Blacker 🐊 — Fri, 04 Aug 2023 11:42:07 +0000

Do you know if you replace github.com by github.dev into your repo URL it opens VS Code into your browser ?

Super

Manu The Blacker 🐊 — Thu, 04 Jun 2020 19:56:20 +0000

Hello world

DEV Community: Manu The Blacker 🐊

How to build a modern Svelte apps using Routify and Django ?

How to generate a WP plugin based on React?

How to use online VS Code editor alongside your GitHub repo ?

Super