Overview
Frontity is a free and open-source react framework for WordPress. It enables you to quickly build a React-based frontend for a headless (or decoupled) WordPress site. Your WordPress site serves its data via the REST API, and the frontend that you build with Frontity consumes this data and renders it in the browser as a SPA (Single Page Application) which you can configure and style as per your liking. Also, it’s an opinionated framework based on React and focused on WordPress
For more information, you can go to the official frontity website.
In this tutorial/blog, we will learn how to set up frontity and how to connect it with our WordPress project.
To get started with Frontity you will need:
Note: Please check that you meet the Installation requirements before following the Installation steps below. ( Also You can also refer to the office frontity website for that. )
- A WordPress installation
- First, a WordPress site is necessary to use frontity. This can be hosted locally, on a web-server, or you can also use a site hosted on wordpress.com
- WordPress Initial checks
- Frontity depends on WordPress REST-API. If you have a recent version of WordPress installed, or if you’re using wordpress.com, then you should be good to go.
- Pretty permalinks activated In Settings->Permalinks as Post name will be good
- REST API URL
- For a self-hosted WordPress site (i.e. local or web-based):
- http://your-wp-domain.com/wp-json
- For wordpress.com:
- https://public-api.wordpress.com/wp/v2/sites/your-wp-site.wordpress.co
- For a self-hosted WordPress site (i.e. local or web-based):
- Node.js installed in your computer
- If you don’t have it, you can get Node.js from the official website. For this, you can also install npm and npx along with Node.js.
- Check if node install with “node -v” or “npm -v”
Create a new Frontity project
Step 1:
Open terminal/cmd and go to the location where you want to set up your project.
Frontity has it’s own CLI. So, you can create a new Frontity project with a single command:
npx frontity create your { project name }
After entering this command, it will start to set up your project, and while setting up this project, it will be prompted to select a theme. You can choose between the Mars theme and TwentyTwenty. If this is your first time trying out Frontity, then we recommend that you select Mars theme.
You’ll also be asked if you want to sign up for the Frontity newsletter. Enter a valid email address if you wish to do so.
Step 2:
After completing the above step it will create a new directory with the project name you used. So, you need to enter that directory for the further process so enter the given command.
cd { project name }Step 3:
Your new Frontity project will have the following structure (As mentioned in Official site ) :
my-app/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
|__ mars-theme/
However, when you spin up your first Frontity project, you will initially be connected to the frontity test website so you won’t have any content when you first try Frontity. But to set up your site, you need to make changes in frontity.settings.js file where you have changed “state” > “source” > “api”.
Step 4:
After completing all previous steps, you can start a development server with command:
npx frontity dev
This server will be listening to http://localhost:3000 and watching for any changes inside the packages folder. But if you have already used 3000 port, then it will ask you for creating a new one, so you just need to enter “yes” or “y”.
Conclusion
I hope this article will give you a better understanding of how to set up a project in frontity framework and connect it with a wordpress also like what are the requirements for frontity set up.
You may also like
WooCommerce: Boost conversion with Pre-Sales activities
Conversion means users who are converted from visitors to customers for your e-commerce website. You...
WooCommerce: Conversion rate
As per today’s situation, about 5+ million e-commerce websites are using the WooCommerce platform. To survive and thrive, you need to know where you stand in this competitive and crowded community. ...
Introducing Twenty Twenty-Two – first default block theme!
The WordPress default theme twenty twenty-two with WordPress...
