Localhost link does not load

Hello all!

I have followed the instructions to create my first theme and everything was just fine up until the “Displaying Posts” chapter. Afterwards, for some reason, the site will not load after clicking the http://localhost:3000.

I have checked but cannot find where the mistake may be. When I made a repository with the project in GitHub, I was not able to get the whole project to appear. The “my-first-theme” folder does not show up in the “packages” folder which probably points to the error, but which I unfortunately, cannot find for being a newbie.

This is the link to the repository: GitHub - griego62/my-first-theme: Trying to build my first theme with Frontityhttps://github.com/griego62/my-first-theme

This is the system info:

System:

  • OS: Windows 10 10.0.19042
  • CPU: (8) x64 Intel(R) Core™ i7-8565U CPU @ 1.80GHz
  • Memory: 1.37 GB / 7.89 GB

Binaries:

  • Node: 14.17.0 - C:\Program Files\nodejs\node.EXE
  • npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD

Browsers:

  • Chrome: 91.0.4472.101
  • Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48)
  • Internet Explorer: 11.0.19041.1

npmPackages:

  • @frontity/core: ^1.14.2 => 1.14.2
  • @frontity/html2react: ^1.7.0 => 1.7.0
  • @frontity/mars-theme: ./packages/mars-theme => 1.5.2
  • @frontity/tiny-router: ^1.4.2 => 1.4.2
  • @frontity/wp-source: ^1.11.5 => 1.11.5
  • frontity: ^1.16.0 => 1.16.0
  • my-first-theme: file:packages/my-first-theme => 1.0.0

npmGlobalPackages:

  • frontity: Not Found
  • npx: Not Found

This is what I get when clicking the localhost link:

Again, I am completely new to this, including gits and GitHub. I would appreciate your patience and assistance. Thank you in advance!

Hi @yannisvmx

I notice that you don’t have a root level package.json in your repo. Did you fail to include it in your commit, or is it missing in your local project?

What happens when you run npx frontity dev?

The error message in the browser seems to suggest that the web server is not running, or not running on port 3000.

Thank you for your reply. This is how the structure is locally:

I had issues when trying to place the repo on GitHub and finally decided to just upload the package folder through the visual UI (drag and drop files), which has limitations. This is the repo I managed to commit through the CLI: https://github.com/griego62/hello-frontity.

I am not very CLI savvy, so I thought I may be doing something wrong and could not get the whole content of the package folder on GitHub.

When I ran npx frontity dev, localhost:3000 managed to load. This is what CLI returned:


SERVER STARTED -- Listening @ http://localhost:3000
  - mode: development
  - target: module
  - public-path: /static/


(node:10580) Warning: Closing file descriptor 3 on garbage collection
(Use `node --trace-warnings ...` to show where the warning was created)
(node:10580) [DEP0137] DeprecationWarning: Closing a FileHandle object on garbage collection is deprecated. Please close FileHandle objects explicitly using FileHandle.prototype.close(). In the future, an error will be thrown if a file descriptor is closed during garbage collection.
webpack built client 07515e04268947e22c01 in 3120ms
i 「wdm」: Hash: 07515e04268947e22c0142732581c5e5f338631a
Version: webpack 4.46.0
Child client:
    Hash: 07515e04268947e22c01
    Time: 3120ms
    Built at: 18/06/2021 19:30:02
                             Asset       Size          Chunks                    Chunk Names
    ../bundling/chunks.module.json  669 bytes                  [emitted]
          hello-frontity.module.js   5.48 MiB  hello-frontity  [emitted]  [big]  hello-frontity
    Entrypoint hello-frontity [big] = hello-frontity.module.js
    [0] multi webpack-hot-middleware/client ./build/bundling/entry-points/hello-frontity/client.ts 40 bytes {hello-frontity} [built]
    [./build/bundling/entry-points/hello-frontity/client.ts] 992 bytes {hello-frontity} [built]
    [./node_modules/@emotion/react/jsx-runtime/dist/emotion-react-jsx-runtime.browser.esm.js] 926 bytes {hello-frontity} [built]
    [./node_modules/@frontity/connect/src/index.js] 243 bytes {hello-frontity} [built]
    [./node_modules/@frontity/core/src/app/index.tsx] 713 bytes {hello-frontity} [built]
    [./node_modules/@frontity/core/src/client/index.tsx] 2.2 KiB {hello-frontity} [built]
    [./node_modules/@frontity/html2react/src/index.ts] 214 bytes {hello-frontity} [built]
    [./node_modules/@frontity/tiny-router/src/index.ts] 241 bytes {hello-frontity} [built]
    [./node_modules/core-js/modules/es.string.replace.js] 3.96 KiB {hello-frontity} [built]
    [./node_modules/strip-ansi/index.js] 189 bytes {hello-frontity} [built]
    [./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 1.79 KiB {hello-frontity} [built]
    [./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 6 KiB {hello-frontity} [built]
    [./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 3.39 KiB {hello-frontity} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {hello-frontity} [built]
    [./packages/my-first-theme/src/index.js] 204 bytes {hello-frontity} [built]
        + 265 hidden modules
Child server:
    Hash: 42732581c5e5f338631a
    Time: 6152ms
    Built at: 18/06/2021 19:30:05
        Asset      Size  Chunks                    Chunk Names
    server.js  7.56 MiB    main  [emitted]  [big]  main
    Entrypoint main [big] = server.js
    [./build/bundling/entry-points/server.ts] 388 bytes {main} [built]
    [./node_modules/@frontity/core/src/server/index.ts] 2.52 KiB {main} [built]
    [./node_modules/@frontity/core/src/server/middlewares/error-handling.ts] 500 bytes {main} [built]
    [./node_modules/@frontity/core/src/server/middlewares/scripts-stats.ts] 593 bytes {main} [built]
    [./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts] 5.11 KiB {main} [built]
    [./node_modules/@frontity/core/src/server/middlewares/settings-and-store.ts] 1.66 KiB {main} [built]
    [./node_modules/@frontity/html2react/processors/script.tsx] 718 bytes {main} [built]
    [./node_modules/@frontity/html2react/src/index.ts] 214 bytes {main} [built]
    [./node_modules/@frontity/html2react/src/libraries/component.tsx] 7.98 KiB {main} [built]
    [./node_modules/@frontity/tiny-router/src/actions.ts] 9.14 KiB {main} [built]
    [./node_modules/@frontity/tiny-router/src/index.ts] 241 bytes {main} [built]
    [./node_modules/core-js/modules/es.promise.js] 13.9 KiB {main} [built]
    [./node_modules/koa-mount/index.js] 1.84 KiB {main} [built]
    [./node_modules/koa-route/index.js] 1.19 KiB {main} [built]
    [./packages/my-first-theme/src/index.js] 204 bytes {main} [built]
        + 472 hidden modules
i 「wdm」: Compiled successfully.


You are trying to use autoFetch but no source package is installed.
Visit https://community.frontity.org for help! 🙂

Did you add your packages to the frontity settings array?

You mean like this? I just did it. Had not added them before.

´´´

const settings = {
“name”: “hello-frontity”,
“state”: {
“frontity”: {
“url”: “https://test.frontity.org”,
“title”: “Test Frontity Blog”,
“description”: “WordPress installation for Frontity development”
}
},
“packages”: [
{
“name”: “my-first-theme”,
“state”: {
“source”: {
“url”: “https://test.frontity.org
}
}
},
@frontity/my-first-theme”,
@frontity/mars-theme”,
@frontity/tiny-router”,
@frontity/html2react”
]
};

export default settings;

you’re mixing up your settings for wp-source into your theme package settings there

try this…

1 ) define your package pointing to your theme location

root package.json

"dependencies": {
    "@frontity/my-first-theme": "./packages/my-first-theme",
    ...
    ...

2 ) add the theme package to the frontity settings, and configure wp-source package

frontity.settings.js

  "packages": [
    {
      "name": "@frontity/my-first-theme",
      "state": {
        "theme": {
          "menu": [
            // etc
          ],
        }
      },
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "url": "http://test.frontity.org"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react",
  ]
2 Likes

Thank you for your time. I went through all the commits in the tutorial and was able to fix the issue. Continuing with the creation of my first theme, although I’m struggling because of a lack of basic JS. Only way to learn! :grinning:

3 Likes