Quick start guide
Last updated
Was this helpful?
Last updated
Was this helpful?
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!
Please check that you meet the before following the steps below.
1 - Create a new Frontity project by entering the following command in your terminal:
2 - Select a starter theme. If it's your first time using Frontity we recommend that you select @frontity/mars-theme
to start with.
A directory with the same name as the project name you used will be created. It will have a structure similar to this:
3 - Run the project locally by executing this command from the terminal:
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.
A good next step is setting your own WordPress installation as the data source.
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.
Your site at
http://localhost:3000
won'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.
A development server will be started. This server will be listening on and watching for any changes inside the packages directory.
You can connect your to your Frontity project by property in the frontity.settings.js
file.
Setting state.source.url
should be sufficient for most WordPress.org installations and WordPress.com plans. For specific use cases check the guide .
Frontity's primary learning resource is the . 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.
There are several 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.
The main reference resource is the . 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.
When you're done developing and are ready to launch your new site follow the instructions in the section to learn how to deploy your finished Frontity site. We recommend that you start by .
If demos are more your thing, a number of different Frontity projects and examples can be found on this .
In addition, you can head over to Frontity's to watch a series of videos called , which are especially interesting to learn more about specific topics of Frontity.
The 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 and search the before posting.