Hello everyone,
I just finished my first Frontity project, and first React project with Wordpress. It’s currently fully hosted on AWS and can be visited at https://www.web1.fi/. Sorry, but not everything has been translated on English, unfortunately.
Web1 is a Finnish, high quality hosting solution company, that provides various services from optimized servers to custom solutions on cloud platforms, such as AWS or Azure.
I got hired by them to work on a problem they had with their website and ordering platform. We held a meeting, did some brainstorming and came to the conclusion that the obvious problem was that their website looked nothing like their ordering platform, and it most likely caused confusion and loss of trust in potential customers.
The goal was simple: to create a design and experience that would not result in the loss of trust for any potential client. The experience between the two platforms had to match as much as possible.
I’m not gonna go into more detail about the UX process. I’m an amateur when it comes to that, but I’m learning and trying to use that on my projects. We figured the goals and non-goals of the project and selected React (Frontity) and Wordpress as the code platform solution for the website.
After the design the first step was to complete the website. Step two was to make the order platform’s design to match. For this reason I decided to use SCSS as the style solution to compile the stylesheets that I could just throw at the other platform. I totally missed on the opportunity to use Styled components, but that’s not a big deal.
Frontity really helped me by removing the need to write the integration with Wordpress or set up any state management solution for this small website. It was the first time I decided to use Frontity, or React for that matter, with Wordpress. It proved to be quite interesting and totally changed my approach to building websites on Wordpress. I will not be going back to PHP templates but rather keep it headless.
We’re still tweaking the setup on AWS to boost performance, and the site is completely missing SEO and other things, but for a starting point it’s OK. We kind of rushed it in the end and I haven’t had time to jump in to fine tune it yet.
Frontity is hosted on AWS Lambda with API Gateway on front of it, obviously. Wordpress was hosted on Amazon Lightsail. It didn’t take more than a few hours to figure everything out in AWS to make the whole setup work. For such a small setup, we didn’t even think about automated deployment pipelines or anything.
We did run into some issues with webfonts (Font Awesome icons). In the end I couldn’t figure out why they wouldn’t download from the build, so I had to go around that and throw them on an S3 bucket and load them from there.
I’m already building my second project with Frontity. This time the site is much bigger and the project is moving much faster.
I also wrote an article to medium about my initial experiences with Frontity which includes a few minor tips for React:
