How to create a frontity-package?

[mohammed.saeb98]

Hi everyone. I need to create a frontity theme from scratch, I ran npx frontity create-package and gave both name and namespace the same name “blogTheme” but whenever I try to add the theme to the frontity.settings.js file I get an error that says “Internal Server Error” on web page. I’m still new to frontity so I don’t know how exactly how I’m supposed to deploy the new theme, I tried adding it in the packages array like this

  packages: [
    {
      name: "blogTheme",
    },
    {
      name: 'frontity-chakra-theme',
      state: {
        theme: {
          menu: [
            ['Home', '/home/'],
            ...  

and I tried replacing the current theme with blogTheme

  packages: [
    {
      name: 'blogTheme',
      state: {
        theme: {
          menu: [
            ['Home', '/home/'],
            ...

and both of them didn’t work, I searched if there was anyone that explained how deploy a new theme in frontity and didn’t find anything. Please help.

[David]

Hi @mohammed.saeb98, and welcome!

I assume you got that error in the browser when running npx frontity dev, right? What’s the error message that appears in the terminal?

You can check also the files generated by the npx frontity create-package command. What’s the content of the following files?

• ./packages/blogTheme/src/index.js
• ./packages/blogTheme/package.json

And last, could you run npx frontity info in your project folder? Just to check what packages are installed in your project.

[mohammed.saeb98]

Ok I figured out the solution, it was a really dumb reason to be honest, I just had to run npm install again and change the name of the theme from the default one to blogTheme in frontity.settings.js

,

[Pablo]

Hey Mohammed! I’m glad you solved the issue and welcome to our community

By the way, we are curious about what brought you to Frontity. What are you planning to build? Let us know if you need help with anything!

[mmczaplinski]

I think it would be really helpful to display to the user a sort of “next steps” in the CLI after having run frontity create or frontity create-package!

Currently this is the output for running frontity create-package lalala:

> ~/Testing  npx frontity create frontity-hello-test
npx: installed 147 in 30.758s
✔ Ensuring /Users/czapla/Testing/frontity-hello-test directory.
✔ Creating package.json.
✔ Creating frontity.settings.js.
✔ Cloning @frontity/mars-theme.
✔ Installing dependencies.
✔ Downloading favicon.ico.

Frontity project created.

? Do you want to receive framework updates by email? No

Ok, that's fine! 😉
You can subscribe at any point with npx frontity subscribe <email>.

Run cd frontity-hello-test && npx frontity dev and have fun! 🎉

You can find docs at https://docs.frontity.org/.
If you have any doubts, join our community at https://community.frontity.org/.

We can add something like:

Your theme is in `frontity-hello-test/packages/mars-theme`. 

To learn why frontity projects are divided into packages: https://docs.frontity.org/learning-frontity/packages.

Now: 
1. Edit the `settings.frontity.js` to:
  - Point your theme to your REST API endpoint
  - Add a name and description to your site
Learn more: https://docs.frontity.org/learning-frontity/settings

2. Look in the `frontity-hello-test/packages/mars-theme/src/index.js to:
  - Add custom settings to your theme
  - Add state https://docs.frontity.org/learning-frontity/state
  - Add custom actions https://docs.frontity.org/learning-frontity/state

This is super basic, just to give an idea.