Add a new Frontity package or theme to your project
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 Frontity packages. 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 docs page.
External packages
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:1
npm install new-frontity-package
Copied!
It will be automatically added to your
node_modules folder and your package.json file.Local packages
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_modulesfolder of your project, so you'll need to look for the package and move it to the folderpackagesinside 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 alocalpackage, we have to point it to its proper folder.
1
{
2
"name": "frontity-project",
3
...
4
"dependencies": {
5
...
6
"another-frontity-theme": "./packages/another-frontity-theme",
7
//before it would be something like "another-frontity-theme": "^1.0.0"
8
...
9
}
10
}
Copied!
- 1.Once changed, run
npm installat the root of your project and it will work aslocalpackage.
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.
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 Frontity Package or Frontity Theme).1
const settings = {
2
...
3
"packages": [
4
...
5
//If the package has no settings
6
"new-frontity-package",
7
8
//If you want to add settings to your package
9
{
10
"name": "new-frontity-package",
11
//Add your settings here
12
},
13
...
14
]
15
};
16
17
export default settings;
Copied!
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.jsLast modified 1yr ago