Localhost link does not load

yannisvmx · 18 June 2021 11:06

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 Frontity https://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!

mburridge · 18 June 2021 15:37

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.

yannisvmx · 18 June 2021 16:33

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! 🙂

codemonkeynorth · 18 June 2021 17:15

Did you add your packages to the frontity settings array?

yannisvmx · 18 June 2021 18:04

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;

codemonkeynorth · 18 June 2021 21:00

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",
  ]

yannisvmx · 20 June 2021 09:30

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!