Quick start guide
Right, let's get you set up with your very first Frontity project. This guide will take you from the very basics to feeling amazed at what you can do with Frontity!
Getting started with Frontity
1 - Create a new Frontity project by entering the following command in your terminal:
1
npx frontity create my-first-frontity-project
Copied!
2 - Select a starter theme. If it's your first time using Frontity we recommend that you select
@frontity/mars-theme to start with.1
? Pick a starter theme to clone: @frontity/mars-theme (recommended)
Copied!
A directory with the same name as the project name you used will be created. It will have a structure similar to this:
1
my-first-frontity-project/
2
|__ node_modules/
3
|__ package.json
4
|__ frontity.settings.js
5
|__ favicon.ico
6
|__ packages/
7
|__ mars-theme/
Copied!
3 - Run the project locally by executing this command from the terminal:
1
cd my-first-frontity-project && npx frontity dev
Copied!
A development server will be started. This server will be listening on http://localhost:3000 and watching for any changes inside the packages directory.
4 - Now you’re ready to make changes to your site:
Open the project directory in your preferred code editor/IDE and try editing some of the files under
packages/mars-theme. Each time you save a change the browser will automatically reload and display the new version as these changes are detected by the development server.Set your own WordPress installation
A good next step is setting your own WordPress installation as the data source.
You can connect your own WordPress site to your Frontity project by setting the
state.source.url property in the frontity.settings.js file.1
const settings = {
2
...,
3
packages: [
4
...,
5
{
6
name: "@frontity/wp-source",
7
state: {
8
source: {
9
// Change this url to point to your WordPress site.
10
url: "https://test.frontity.org/"
11
}
12
}
13
}
14
]
15
}
Copied!
By default,
state.source.url is set to https://test.frontity.org/ (a demo WordPress site) but you can set this property to any valid URL pointing to a WordPress site.Setting
state.source.url should be sufficient for most WordPress.org installations and WordPress.com plans. For specific use cases check the guide Setting the URL of the WordPress data source.Your site athttp://localhost:3000won't auto-update with this change as auto-updates only occur with changes to files in the packages directory, so you will need to manually refresh the page in your browser.
You should now see your own posts in the Frontity project displayed in the browser.
What's next?
Follow the Step-by-Step Tutorial
Frontity's primary learning resource is the Step-by-Step Tutorial. This is the perfect place to start if you're new to Frontity, or even if you've previously used Frontity but feel that your knowledge is incomplete or fragmented.
Check Frontity's guides
There are several Guides that will help you in your understanding of working with Frontity, and which will also assist you in solving some of the common challenges that come up when working with Dynamic SSR (server-side Rendering) in React apps connected to WordPress.
Check the API Reference
The main reference resource is the API Reference. This is where you'll find detailed information about Frontity CLI, packages, plugins and themes. Once you've mastered the basics of working with Frontity this is where you're likely to spend most of your time when working on projects.
Deploy your site
When you're done developing and are ready to launch your new site follow the instructions in the Deployment section to learn how to deploy your finished Frontity site. We recommend that you start by deploying your site to Vercel.
Additional resources
If demos are more your thing, a number of different Frontity projects and examples can be found on this GitHub repository.
In addition, you can head over to Frontity's Youtube channel to watch a series of videos called Frontity Talks, which are especially interesting to learn more about specific topics of Frontity.
The Frontity Community Forum is the best place to get community support while helping others with your own questions and solutions. To keep it running smoothly, we encourage you to read through this Forum Guide and search the available learning resources before posting.
Last modified 6mo ago