localhost refused to connect.

[torkamanmahdi]

Hello,
I installed frontity according to the documentation [ https://docs.frontity.org/getting-started ], but after running frontity without any edition [npx frontity dev] I received the following error.

NPM version: 9.2.0
Node Version: 18.12.1

Browser Error:
This site can’t be reachedlocalhost refused to connect.

Console Error:
SERVER STARTED -- Listening @ http://localhost:3000

• mode: development
• target: module
• public-path: /static/

(node:1450) Warning: Closing file descriptor 28 on garbage collection
(Use node --trace-warnings ... to show where the warning was created)
(node:1450) [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.
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:71:19)
at Object.createHash (node:crypto:133:10)
at module.exports (/Users/user/Desktop/mtcom/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/user/Desktop/mtcom/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/user/Desktop/mtcom/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/user/Desktop/mtcom/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/user/Desktop/mtcom/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/user/Desktop/mtcom/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/user/Desktop/mtcom/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/user/Desktop/mtcom/node_modules/loader-runner/lib/LoaderRunner.js:221:10)

[saminightshift]

I just saw this in a similar issue that seemed to help get the environment running. #910 (comment)

[torkamanmahdi]

Thanks for the advice @saminightshift . I changed the version Node from 18.12.1 to 16.8 and it worked but got another error and only the header is displayed.
error: Oops! Something went wrong

terminal error:
(node:15804) Warning: Closing file descriptor 3 on garbage collection
(Use node --trace-warnings ... to show where the warning was created)
(node:15804) [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 a4c55c1d351683b1046e in 2028ms
i ｢wdm｣: Hash: a4c55c1d351683b1046e33f027de6c3403696d09
Version: webpack 4.46.0
Child client:
Hash: a4c55c1d351683b1046e
Time: 2028ms
Built at: 01/30/2023 5:53:51 PM
Asset Size Chunks Chunk Names
../bundling/chunks.module.json 1.44 KiB [emitted]
list.module.js 46.5 KiB list [emitted] list
my-first-frontity-project.module.js 6.69 MiB my-first-frontity-project [emitted] [big] my-first-frontity-project
Entrypoint my-first-frontity-project [big] = my-first-frontity-project.module.js
[0] multi webpack-hot-middleware/client ./build/bundling/entry-points/my-first-frontity-project/client.ts 40 bytes {my-first-frontity-project} [built]
[./build/bundling/entry-points/my-first-frontity-project/client.ts] 1.25 KiB {my-first-frontity-project} [built]
[./node_modules/@frontity/core/src/client/index.tsx] 2.22 KiB {my-first-frontity-project} [built]
[./node_modules/@frontity/html2react/src/index.ts] 214 bytes {my-first-frontity-project} [built]
[./node_modules/@frontity/tiny-router/src/index.ts] 241 bytes {my-first-frontity-project} [built]
[./node_modules/@frontity/wp-source/src/index.ts] 1.93 KiB {my-first-frontity-project} [built]
[./node_modules/core-js/modules/es.array.iterator.js] 2.56 KiB {my-first-frontity-project} [built]
[./node_modules/core-js/modules/es.object.from-entries.js] 468 bytes {my-first-frontity-project} [built]
[./node_modules/core-js/modules/es.regexp.exec.js] 274 bytes {my-first-frontity-project} [built]
[./node_modules/core-js/modules/es.string.replace.js] 5.48 KiB {my-first-frontity-project} [built]
[./node_modules/core-js/modules/web.dom-collections.iterator.js] 1.72 KiB {my-first-frontity-project} [built]
[./node_modules/core-js/modules/web.url-search-params.js] 138 bytes {my-first-frontity-project} [built]
[./node_modules/strip-ansi/index.js] 230 bytes {my-first-frontity-project} [built]
[./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 1.76 KiB {my-first-frontity-project}
[built]
[./node_modules/webpack-hot-middleware/client.js] (webpack)-hot-middleware/client.js 6.23 KiB {my-first-frontity-project} [built]
+ 391 hidden modules
Child server:
Hash: 33f027de6c3403696d09
Time: 3594ms
Built at: 01/30/2023 5:53:52 PM
Asset Size Chunks Chunk Names
server.js 9.25 MiB main [emitted] [big] main
Entrypoint main [big] = server.js
[./build/bundling/entry-points/server.ts] 505 bytes {main} [built]
[./node_modules/@frontity/core/src/server/index.ts] 3.11 KiB {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/capabilities-and-actions.tsx] 1.26 KiB {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/error-handling.ts] 500 bytes {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/init.ts] 274 bytes {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/scripts-stats.ts] 596 bytes {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/server-side-rendering.ts] 6.07 KiB {main} [built]
[./node_modules/@frontity/core/src/server/middlewares/settings-and-store.ts] 854 bytes {main} [built]

[primitiveshaun]

Hi @torkamanmahdi,

As mentioned Frontity only supports up to node 16 at present so downgrade is the simplest option.

After making changes you probably want to delete these files/directories:

rm -rf node_modules/
rm -rf build/
rm package-lock.json

Then run npm i again.

If issues persist try running npm clear cache then repeat steps above.

RE: Error: error:0308010C:digital envelope routines::unsupported

Node 17+ uses OpenSSL 3.

Currently there's a legacy flag workaround if you want to try with node 18 however you may hit other issues as Frontity hasn't been upgraded to the latest Nodejs versions.

export NODE_OPTIONS=--openssl-legacy-provider

• error:0308010C:digital envelope routines::unsupported"
• Openssl Enable Legacy Renegotiation
• node: --openssl-legacy-provider is not allowed in NODE_OPTIONS

[torkamanmahdi]

tahnks for the help @primitiveshaun .

[ThiagoSGomes-Dev]

Hi @torkamanmahdi I'd like to know if you've solved the issue you mentioned in your last message. I'm trying to create an application with Frontity and I'm having a problem where only the header appears on the website.

[torkamanmahdi]

@ThiagoSGomes-Dev

Unfortunately, this problem did not work for me in several other ways that I tested. I think that frontity can no longer be used

[ThiagoSGomes-Dev]

Hello @torkamanmahdi, unfortunately it's a shame, but I was browsing the internet and found this website https://michaelsoriano.com/wordpress-theme-react-part-1-setup/. I used my experience trying to use Frontity, and it worked very well with the same version of Node.js. I recommend that you try using this tool!

[torkamanmahdi]

Hi @ThiagoSGomes-Dev, thanks for the sharing. you can see this project too https://github.com/JEverhart383/crash-course-headless-wp-next-wpgraphql .

[FrancoisSoler]

Hi,

I used to work with Frontity, and if you want to use Wp + React there are alternatives, like the Wordpress plugin ReactPress, wich allows to run a React app in a WP pages. I used it for my works in several projects and it works great. Also there is Faust Js, made by Wp Engine, witch is kinda like Frontity

[saminightshift]

I can agree with @FrancoisSoler - Faust is probably the best framework for headless Wordpress. I've used it for a few client projects now, the new release it lightening fast as well.