Rename mars-theme to a new name

[thedonquixotic]

@luisherranz Okay so I made some progress but I’m having trouble getting it to switch over to the new theme.

https://hire-me.jackalope.tech/

It properly brings stuff up but it’s on the mars theme. I changed over the package.json to look like this:

{
  "name": "bolt-web",
  "version": "1.0.0",
  "private": true,
  "description": "Frontity project",
  "keywords": [
    "frontity"
  ],
  "scripts": {
    "dev": "frontity dev",
    "build": "frontity build",
    "serve": "frontity serve"
  },
  "prettier": {},
  "dependencies": {
    "@frontity/core": "^1.2.0",
    "@frontity/html2react": "^1.1.10",
    "@frontity/tiny-router": "^1.0.13",
    "@frontity/wp-source": "^1.2.0",
    "desert-jackalope": "file:packages/desert-jackalope",
    "frontity": "^1.3.0"
  }
}

Which is what it looks like on my local machine too. But then if I hit: npx frontity dev it will result in an error message saying it can’t find desert-jackalope.

If I install via npm using npm install ./packages/desert-jackalope then it will link to the correct file but it will put it under "desert-jackalope": "@frontity/mars-theme", instead of "desert-jackalope": "file:packages/desert-jackalope",

If I use npm link ./packages/desert-jackalope then it will do the same thing as my manual insertion of "desert-jackalope": "file:packages/desert-jackalope", but will give me the same error when I run npx frontity dev

Any thoughts?

[luisherranz]

I’ve moved your last message here to a new topic because I think this is not answered anywhere else in the forum and that way it’ll be easier to find for other people in the future. Original topic is here: Trouble installing on a DreamHost VPS.

These are the steps needed to rename the @frontity/mars-theme package to my-awesome-theme:

1. Rename the package itself:
   Rename the folder to /packages/my-awesome-theme/:
   

   
   
   And rename the package name in /packages/my-awesome-theme/package.json:
   
   
   
   – You can also change the version and description.

2. Rename the dependency:
   In the project’s package.json, change:

• The package "@frontity/mars-theme" to "my-awesome-theme".
• The folder "./packages/mars-theme" to "./packages/my-awesome-theme".
  From this:
  
  
  
  To this:
  
  

3. Update the frontity.settings.js file:
   Rename the @frontity/mars-theme package to my-awesome-package:
   

   

4. Do npm install again:
   Run npm install so everything gets properly linked internally. If you see any error, delete the /node_modules folder and do the npm install again.

---

By the way, I have added a npx frontity rename-package command to our roadmap to make all these changes automatically

[thedonquixotic]

I had already done most of that stuff but it still wasn’t working. The problem was I was not running npm install.

after running npm install by itself I am able to successfully run npx frontity dev without error.

This however does not seem to work as going to hire-me.jackalope.tech gives me an internal server error response.

Any clues on why that might be?

I think it might be related to this:

For reference here is my package.json and frontity.settings.js files in full.

{
  "name": "hire-me.jackalope.tech",
  "version": "1.0.0",
  "private": true,
  "description": "Frontity project",
  "keywords": [
    "frontity"
  ],
  "scripts": {
    "dev": "frontity dev",
    "build": "frontity build",
    "serve": "frontity serve"
  },
  "prettier": {},
  "dependencies": {
    "@frontity/core": "^1.2.0",
    "@frontity/html2react": "^1.1.10",
    "@frontity/mars-theme": "file:packages/mars-theme",
    "@frontity/tiny-router": "^1.0.13",
    "@frontity/wp-source": "^1.2.0",
    "desert-jackalope": "file:packages/desert-jackalope",
    "frontity": "^1.3.0"
  }
}

and

frontity.settings.js:

const settings = {
  "name": "hire-me.jackalope.tech",
  "state": {
    "frontity": {
      "url": "https://hire-me.jackalope.tech",
      "title": "aslan french: design technologist",
      "description": ""
    }
  },
  "packages": [
    {
      "name": "desert-jackalope",
      "state": {
        "theme": {
          "menu": [
            ["blog", "https://www.jackalope.tech/"],
            [
              "newsletter",
              "https://mailchi.mp/f75162f1141a/design-x-code_newsletter"
            ]
          ],
          "featured": {
            "showOnList": true,
            "showOnPost": true
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://www.jackalope.tech/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
};

export default settings;

[luisherranz]

after running npm install by itself I am not able to succesfully run npx frontity dev without error.

Are you able or are you not able? If you are not, what is the error you see?

[thedonquixotic]

Sorry that was a typo on my part. I meant to say “I am able to run it successfully without error”.

Once run though, the server does not allow me to access the server.js and I receive a internal server error response on the page.

I am however now able to see the page properly using my custom theme so I’m going to assume this was probably a caching issue?

[SantosGuillamot]

Not an expert here, the @development-team will help you better, but I can see that in your package.json you still have "frontity/mars-theme"... although you have renamed it. Maybe you should delete this too if you are not using that package anymore.

[thedonquixotic]

I refreshed the website this morning and it works! I think there was just a delay on the cache.

Thanks for the help! I’m going to continue working on my custom theme. I’ll probably pop in with more questions as time goes on.

[luisherranz]

Congratulations

One important detail: you’re using the “development” version of Frontity, not the “production” version.

When you run npx frontity dev, Frontity generates a developer friendly project in your /build folder, with features like hot-module-replacement (autorefresh) that you don’t really need in production.

Before you upload your project to production, you should run npx frontity build. That generates a production ready project in the /build folder, which is faster and smaller than the developer one.

[thedonquixotic]

Excellent thank you @luisherranz

Unfortunately doing this seems to have broken my website a little bit Now none of my images are loading and IDK why. I also tried rerunning npx frontity dev but the images would not come back.

[s74]

Sorry, but these steps does not work. I get an error saying that my theme cannot be found and that I should install it as package. And that does not work either.

I just want to rename the mars-theme since the WP menu only works without errors with that.