Frontity Docs
  • Β» Welcome to Frontity
  • πŸš€Getting started
    • Quick start guide
  • πŸ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • πŸ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • πŸ—οΈArchitecture
    • Decoupled Mode
    • Embedded Mode
  • 🌎Deployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • πŸŒ—Isomorphic React
  • ⚑️ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • πŸ”ŽSEO
  • πŸ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • πŸ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • Getting started with Frontity
  • Set your own WordPress installation
  • What's next?
  • Follow the Step-by-Step Tutorial
  • Check Frontity's guides
  • Check the API Reference
  • Deploy your site
  • Additional resources

Was this helpful?

  1. Getting started

Quick start guide

PreviousGetting startedNextAbout Frontity

Last updated 4 years ago

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.

Getting started with Frontity

1 - Create a new Frontity project by entering the following command in your terminal:

npx frontity create my-first-frontity-project

2 - Select a starter theme. If it's your first time using Frontity we recommend that you select @frontity/mars-theme to start with.

? Pick a starter theme to clone: @frontity/mars-theme (recommended)

A directory with the same name as the project name you used will be created. It will have a structure similar to this:

my-first-frontity-project/
|__ node_modules/
|__ package.json
|__ frontity.settings.js
|__ favicon.ico
|__ packages/
    |__ mars-theme/

3 - Run the project locally by executing this command from the terminal:

cd my-first-frontity-project && npx frontity dev

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.

const settings = {
  ...,
  packages: [
    ...,
    {
      name: "@frontity/wp-source",
      state: {
        source: {
          // Change this url to point to your WordPress site.
          url: "https://test.frontity.org/"
        }
      }
    }
  ]
}

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.

What's next?

Follow the Step-by-Step Tutorial

Check Frontity's guides

Check the API Reference

Deploy your site

Additional resources

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.

πŸš€
http://localhost:3000
own WordPress site
setting the state.source.url
Setting the URL of the WordPress data source
Step-by-Step Tutorial
Guides
API Reference
Deployment
deploying your site to Vercel
GitHub repository
Youtube channel
Frontity Talks
Frontity Community Forum
Forum Guide
available learning resources
requirements