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
  • 1. Install the Frontity package
  • External packages
  • Local packages
  • 2. Add it to `frontity.settings.js`

Was this helpful?

  1. Guides

Add a new Frontity package or theme to your project

PreviousUnderstanding a Frontity projectNextHow to share your Frontity project

Last updated 4 years ago

Was this helpful?

In Frontity themes are just any other type of package, so the info explained in this guide can be applied to when you want to use an alternative theme in your project

During the development of your project, you may want to install new Frontity packages, or even change the ones you are using (for example if you want to use a different theme or a different analytics service). In order to do this, you'll need to:

  1. Install the Frontity package.

  2. Add it to frontity.settings.js.

Please note that this process is only necessary for . If you want to install an npm package you can use the normal npm install some-package procedure.

1. Install the Frontity package

At this point, you need to differentiate between the external packages (which aren't meant to be modified) and the local packages (the ones you want to change at your will), because its installation will be slightly different. If you want to understand better how external and local packages work you can check its .

External packages

This is the typical way of using

These packages will be treated like any npm package and stored in node_modules folder, where all your dependencies are installed. In order to install a package as external you just have to run this command in the root of your project:

npm install new-frontity-package

It will be automatically added to your node_modules folder and your package.json file.

Local packages

This is the typical way of using Frontity

The process to install a local package is pretty similar, but you'll have to make minor modifications.

  1. You need to install the package as an external one by running npm install new-frontity-package

  2. It will be installed inside the node_modules folder of your project, so you'll need to look for the package and move it to the folder packages inside your Frontity project.

  3. Next step would be to change your package.json. You'll have your new package inside the dependencies of your project, pointing to its latest version. As we are going to use it as a local package, we have to point it to its proper folder.

{
  "name": "frontity-project",
  ...
  "dependencies": {
    ...
    "another-frontity-theme": "./packages/another-frontity-theme",
    //before it would be something like "another-frontity-theme": "^1.0.0"
    ...
  }
}
  1. Once changed, run npm install at the root of your project and it will work as local package.

We are planning to release a new command, that will take care of all these steps.

2. Add it to `frontity.settings.js`

Once installed, the process it's the same for both external and local packages.

const settings = {
  ...
  "packages": [
    ...
    //If the package has no settings
    "new-frontity-package",

    //If you want to add settings to your package
    {
      "name": "new-frontity-package",
      //Add your settings here
    },
    ...  
  ]
};

export default settings;

And that's all, your package is installed and working now.

Note that if you are changing your theme or any other package, you may want to remove the old one in your package.json and in your frontity.settings.js

You have to include it in your frontity.settings.js, inside the packages array to make it work. Remember to check if any settings are needed and include them as well (You can check that at each specific or ).

๐Ÿ“–
Frontity packages
docs page
Features Packages
Themes
Frontity Package
Frontity Theme