nuejs / create-nue Goto Github PK

The 'npm run start' command on Windows returns an error "." is not recognized as an internal or external command, an executable program, or a batch file.
A correct version of the package.json file for Windows might be the follow:
package.json.txt

          Copy and paste the code above to `scripts` in `package.json`. It is a very quick fix until we figure out the solution to satisfy all users.

Here is the whole package.json, if you are still having troubles:

{
  "name": "create-nue",
  "type": "module",
  "version": "0.1.3",
  "homepage": "https://github.com/nuejs/create-nue",
  "description": "A recommended way to start a Nue project",
  "repository": {
    "url": "https://github.com/nuejs/create-nue.git",
    "type": "git"
  },
  "bin": {
    "create-nue": "./scripts/init.js"
  },
  "scripts": {
    "start": "npm run minify && npm run render && npm run compile && npm run serve",
    "serve": "cd www && node ../scripts/server.js",
    "compile": "node ./scripts/compile.js",
    "minify": "node ./scripts/minify.js",
    "render": "node ./scripts/render.js"
  },
  "dependencies": {
    "nuejs-core": "^0.1.0",
    "js-yaml": "^4.1.0"
  }
}

Originally posted by @kon-pas in #8 (comment)

I've had an issue navigating using the back-navigation on https://nuejs.org/@nextjs-blog/

After entering a story, I cannot navigate to the previous (index) page via the back button. This behavior is reproducible across FF and Chrome.

The observable behavior is jumping to the previous vertical scroll position, but the page content does change.

This is on Ubuntu WSL and I just installed npm via apt --no-install-recommends

The error itself is

npm ERR! Cannot read property 'insert' of undefined

0 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'install' ]
1 info using [email protected]
2 info using [email protected]
3 timing npm:load:whichnode Completed in 0ms
4 timing config:load:defaults Completed in 2ms
5 timing config:load:file:/usr/share/nodejs/npm/npmrc Completed in 2ms
6 timing config:load:builtin Completed in 2ms
7 timing config:load:cli Completed in 2ms
8 timing config:load:env Completed in 0ms
9 timing config:load:file:/home/mario/nue/create-nue/.npmrc Completed in 1ms
10 timing config:load:project Completed in 2ms
11 timing config:load:file:/home/mario/.npmrc Completed in 0ms
12 timing config:load:user Completed in 0ms
13 timing config:load:file:/etc/npmrc Completed in 0ms
14 timing config:load:global Completed in 0ms
15 timing config:load:validate Completed in 2ms
16 timing config:load:credentials Completed in 1ms
17 timing config:load:setEnvs Completed in 0ms
18 timing config:load Completed in 13ms
19 timing npm:load:configload Completed in 13ms
20 timing npm:load:setTitle Completed in 0ms
21 timing config:load:flatten Completed in 2ms
22 timing npm:load:display Completed in 3ms
23 verbose logfile /home/mario/.npm/_logs/2023-09-15T08_36_10_404Z-debug-0.log
24 timing npm:load:logFile Completed in 4ms
25 timing npm:load:timers Completed in 0ms
26 timing npm:load:configScope Completed in 0ms
27 timing npm:load Completed in 20ms
28 timing arborist:ctor Completed in 1ms
29 timing arborist:ctor Completed in 0ms
30 timing idealTree:init Completed in 12ms
31 timing idealTree:userRequests Completed in 1ms
32 silly idealTree buildDeps
33 silly fetch manifest nuejs-core@^0.1.0
34 silly fetch manifest js-yaml@^4.1.0
35 silly placeDep ROOT js-yaml@ OK for: [email protected] want: ^4.1.0
36 silly placeDep ROOT nuejs-core@ OK for: [email protected] want: ^0.1.0
37 timing idealTree:#root Completed in 131ms
38 timing idealTree:node_modules/js-yaml Completed in 0ms
39 timing idealTree:node_modules/nuejs-core Completed in 0ms
40 timing idealTree:buildDeps Completed in 131ms
41 timing idealTree:fixDepFlags Completed in 0ms
42 timing idealTree Completed in 145ms
43 timing command:install Completed in 160ms
44 verbose stack TypeError: Cannot read property 'insert' of undefined
44 verbose stack     at CacheEntry.store (/usr/share/nodejs/npm/node_modules/make-fetch-happen/lib/cache/entry.js:325:27)
44 verbose stack     at cacheFetch (/usr/share/nodejs/npm/node_modules/make-fetch-happen/lib/cache/index.js:18:18)
44 verbose stack     at processTicksAndRejections (internal/process/task_queues.js:97:5)
44 verbose stack     at async fetch (/usr/share/nodejs/npm/node_modules/make-fetch-happen/lib/fetch.js:98:7)
44 verbose stack     at async Arborist.[nodeFromEdge] (/usr/share/nodejs/@npmcli/arborist/lib/arborist/build-ideal-tree.js:1082:19)
44 verbose stack     at async Arborist.[buildDepStep] (/usr/share/nodejs/@npmcli/arborist/lib/arborist/build-ideal-tree.js:951:11)
44 verbose stack     at async Arborist.buildIdealTree (/usr/share/nodejs/@npmcli/arborist/lib/arborist/build-ideal-tree.js:215:7)
44 verbose stack     at async Promise.all (index 1)
44 verbose stack     at async Arborist.reify (/usr/share/nodejs/@npmcli/arborist/lib/arborist/reify.js:152:5)
44 verbose stack     at async Install.exec (/usr/share/nodejs/npm/lib/commands/install.js:157:5)
45 verbose cwd /home/mario/nue/create-nue
46 verbose Linux 5.15.90.1-microsoft-standard-WSL2
47 verbose argv "/usr/bin/node" "/usr/bin/npm" "install"
48 verbose node v12.22.9
49 verbose npm  v8.5.1
50 error Cannot read property 'insert' of undefined
51 verbose exit 1
52 timing npm Completed in 337ms
53 verbose unfinished npm timer reify 1694766970576
54 verbose unfinished npm timer reify:loadTrees 1694766970588
55 verbose code 1
56 error A complete log of this run can be found in:
56 error     /home/mario/.npm/_logs/2023-09-15T08_36_10_404Z-debug-0.log

NUE Live-Server Solution

This is a pretty raw hack that works with Chromium.

Install Live-Server in create-nue directory

npm install live-server

We need to modify Live-Server

1. Goto: create-nue/node_modules/live-server
2. Open index.js
3. Search for /body
4. Add:
   var injectCandidates = [ new RegExp("</main>", "i"), new RegExp("</body>", "i"), ... We need </main>so that the injected.html process works
5. Save it and go back to create-nue/scripts
6. Install live.js

import liveServer from 'live-server'

export default async function (){
 let server = liveServer.start({
   port: 8080,
   host: "0.0.0.0",
   root: "./www",
   open: true,
   ignore: './node_modules, ./scripts',
   file: "index.html",
   wait: 1000,
   mount: [[ "node_modules","scripts" ]], 
   logLevel: 3,
   noCssInject: true,
   middleware: [function(req, res, next) { next(); }] 
 });
}

7. Goto create-nue
8. Modify package.json.
9. Insert "live" in scripts

  "name": "create-nue",
  "type": "module",
  "version": "0.1.4",
  "homepage": "https://github.com/Axellarator/create-nue",
  "description": "A recommended way to start a Nue project",
  "repository": {
    "url": "https://github.com/Axellarator/create-nue.git",
    "type": "git"
  },
  "bin": {
    "create-nue": "./scripts/init.js"
  },
  "scripts": {
    "start": "./scripts/cli.js start",
    "live": "./scripts/cli.js live",
    "minify": "./scripts/cli.js minify",
    "render": "./scripts/cli.js render",
    "compile": "./scripts/cli.js compile",
    "serve": "./scripts/cli.js serve"
  },
  "dependencies": {
    "chokidar": "^3.5.3",
    "js-yaml": "^4.1.0",
    "live-server": "^1.2.2",
    "nuejs-core": "^0.1.0",
    "websocket": "^1.0.34"
  }
}

Start it with npm run live

npm run start still works as indent.
npm run render or npm run compile isn't done automatically. You are still on your own here. The render process creates a new index.html and Live-server will later on reload your browser.

A simpler solution is i.e. Tab Reloader add-on for Firefox. Browser reloader are available for Chrome, Safari and others.

I think, this makes it easier to create new projects.

What do you think?

Edit: Probably not needed anymore with #27

Hello
Can we have a vscode extension for .nue extension ?

I know the current steps to get started are temporary until npx/bunx comes along. But, should we replace git clone [email protected]:nuejs/create-nue.git with git clone https://github.com/nuejs/create-nue.git? The latter leads to a simpler operation and doesn't require whitelisting, etc. Happy to open up a PR 🙂.

The role="button" attribute on the links changes the semantic meaning for screen reader users. Additionally using aria-label should be the last choice with elements as they are not supported by translators in the browser.

would be nice if you put basic examples of components in starter template

https://nuejs.org/docs/nuejs/component-basics.html

like buttons

list of users and similar

node v16.20.0

<button @click="count++">

No clicks yet

First click!

Nice. Another one.

Clicks: { count }

Hey fellow devs,

I want to inform all contributors that the repository structure is going to change quite drastically in approximately two weeks. Currently the goal of this project is pretty vaque and it does not serve well for the purpose of starting out with a new Nue project. The upcoming version 1.0.0-beta will be a major change and showcases more clearly how websites are created with Nue. It is based on semantic styling and Markdown files. I will write a more detailed blog entry about this before pushing the new branch to the repository.

Good example here:

https://www.boag.online/notepad/post/full-prettier-prettierrc-config

Should match the current coding style as close as possible

1. Is there specific reason why bun is used instead of node? Based on my testing with node shebang, I was able to run the cli both on node and bun (wsl).
2. So I changed shebang to node and it works but there is an error during folder creation on windows. The code below produce the path \C:\User\user... Notice the initial backslash before the drive letter. To fix this, I reference the code from nodejs/node#28114 (comment).

Original code:

const root = new URL('.', import.meta.url).pathname
const src = join(root, name)

Fix:

import { dirname } from 'path';
import { fileURLToPath } from 'url';

const __dirname = fileURLToPath(dirname(import.meta.url));
const src = join(__dirname, name)

I would submit a PR if I can change the shebang to node.

using bun to run, it still says "no builder found (esbuild or Bun)"

when i try to start the project give me this error!

$ npm run start

> [email protected] start
> npm run minify && npm run render && npm run compile && npm run serve


> [email protected] minify
> ./scripts/minify.js

'.' is not recognized as an internal or external command,
operable program or batch file.

repo should have github pages available and link to it.

I follow the instruction #17, replace the whole package.json file, and run npm run start, it not listening port 8080, just exit.

There's one file in node_modules that has a .cmd extension, js-yaml.cmd, which I believe makes npm run start always ask Terminate batch job (Y/N)? when pressing Ctrl+C to stop the server.

This question is asked twice, and the server stops regardless of whether you answer Y or N.

I tried catching SIGINT in server.js but nothing I tried will change the behavior. According to a StackOverflow discussion there are solutions (yarn, .ps1) but I don't know currently how to implement them and should get back to work.

To be clear, this has a nearly minimal effect on usability and possibly originates from a dependency (aka not your problem)