Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Why isn't my react.js web application getting displayed on my local host (vite + react)

I had created a react.js web application and after closing my VScode application, I can’t seem to get it to display my current progress. After installing all the node, react, and tailwind packages I ran my server with the command ‘npm run dev’. I assumed that’s what I would always need to type to display my app on the local server. The server runs, but it just comes out as a blank white. I tried using ‘cd my-app’ and then ‘npm start’ but I just got an error message:

npm ERR! Missing script: "start"
npm ERR! 
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages       
npm ERR!     npm stars # View packages marked as favorites
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:      
npm ERR!     C:UsersUSERAppDataLocalnpm-cache_logs2024-02-20T16_14_37_469Z-debug-0.log

my package.json file

{
  "name": "react-tailwind-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.0.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "autoprefixer": "^10.4.17",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "postcss": "^8.4.35",
    "tailwindcss": "^3.4.1",
    "vite": "^5.1.0"
  }
}

Some YouTube tutorials suggested I add the start packages which I tried and didn’t work so I left it the default way I found them. So my question is how do I run an existing react.js/vite that has all the packages installed but just won’t display what’s the command? Also, what’s the difference between npm and npx commands? Note: I’m not new to JavaScript but I’m new to node, react, vite they confusing me. Any help will be highly appreciated.

Tags:

2

Answers


  1. 0

    When you try to run npm run start, you will get an error, because the start script has not been added in package.json.

    In order for you to run your project with your current setup try typing
    npm run dev , this will run your project in dev mode and start a dev server on localhost

    Probably the youtuber you are watching has a custom start script, if you would like to add a custom script you can add it in your scripts json in package.json for example

    
// other package.json stuff
"scripts":{
// other scripts...
"my-start":"vite"
}

// other package.json stuff

    And to run your custom script simply do npm run my-start

    The difference between npm and npx

    npm – is a package installer, uninstaller, updater. Basically used to managed packages

    npx – on the other hand is a package executer, meaning that you can run a package without needed to install the package

    Login or Signup to reply.
  2. 0

    You are most likey running npm start in a directory without a package.json file containing the start script

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search