What steps should I follow to run my JavaScript application locally on Linux Mint?

Currently, I am diligently following a tutorial and ensuring that each step is completed accurately. My goal is to locally host my javascript app at localhost:3000. Unfortunately, I am facing difficulties as every attempt to run npm run dev results in an error log displaying the following:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'dev' ]
2 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="650b150825534b54514b51">[email protected]</a>
3 info using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2a44454e4f6a5c1b1a041b13041a">[email protected]</a>
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37475245445859565b405255445e4352770719071907">[email protected]</a>~predev: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="19697c6b6a767778756e7c7b6a706d7c592937293729">[email protected]</a>
6 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="28584d5a5b474649445f4d4a5b415c4d681806180618">[email protected]</a>~dev: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12627760617d7c737e657770617b667752223c223c22">[email protected]</a>
7 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1c091e1f03020d001b090e1f0518092c5c425c425c">[email protected]</a>~dev: unsafe-perm in lifecycle true
8 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99e9fcebeaf6f7f8f5eefcfbeaf0edfcd9a9b7a9b7a9">[email protected]</a>~dev: PATH: /usr/share/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/omar-backup/Desktop/MrBoogle.github.io/personalWebsite/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
9 verbose lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62120710110d0c030e150700110b160722524c524c52">[email protected]</a>~dev: CWD: /home/omar-backup/Desktop/MrBoogle.github.io/personalWebsite
10 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37475245445859565b405255445e4352770719071907">[email protected]</a>~dev: Args: [ '-c', 'vite' ]
11 silly lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bfbeef9f8e4e5eae7fceee9f8e2ffeecbbba5bba5bb">[email protected]</a>~dev: Returned: code: 1  signal: null
12 info lifecycle <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c1b1a4b3b2aeafa0adb6a4a3b2a8b5a481f1eff1eff1">[email protected]</a>~dev: Failed to exec dev script
13 verbose stack Error: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f8889d8a8b979699948f9d9a8b918c9db8c8d6c8d6c8">[email protected]</a> dev: `vite`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/usr/share/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfafbaadacb0b1beb3a8babdacb6abba9feff1eff1ef">[email protected]</a>
15 verbose cwd /home/omar-backup/Desktop/MrBoogle.github.io/personalWebsite
16 verbose Linux 5.4.0-26-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "dev"
18 verbose node v10.19.0
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f9899c8b8a969798958e9c9b8a908d9cb9c9d7c9d7c9">[email protected]</a> dev: `vite`
22 error Exit status 1
23 error Failed at the <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="70001502031f1e111c0715120319041530405e405e40">[email protected]</a> dev script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

After spending nearly an hour trying to troubleshoot this issue fruitlessly, I've installed vite without success. Instead of hosting my app on localhost:3000, a strange window appears using qt5ct. Unfortunately, this method no longer works due to potential errors caused by my attempts to resolve the initial hosting problem.

You can find the tutorial I'm referencing here. Specifically, my challenges arise around the 2:45 mark.

javascriptnpmlocalhost

Answer №1

Upon initializing a project using npm init, similar to the tutorial you followed, a project based on a template is generated in a specified directory. In your specific case, you executed:

npm init @vitejs/app

This command resulted in the creation of a folder with a predefined Node.js template, along with a package.json file that contains all the necessary dependencies for the project to function properly. For instance:

{
  "name": "vite-project",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "devDependencies": {
    "vite": "^2.3.3"
  }
}

Notice the devDependency named vite, which must be installed to run the npm script 'dev', defined as "dev": "vite".

Initially, when you ran the command, the vite dependency was not installed in the project, leading to the following error message:

error <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c1c091e1f03020d001b090e1f0518092c5c425c425c">[email protected]</a> dev: `vite`

Subsequently, upon running npm install, all the required dependencies listed in the package.json were downloaded and installed. This resolved the missing dependencies issue after installing the vite dependency through npm install.

As a result, the original error transformed into:

Cannot find module 'worker_threads'

This represents a separate error, likely stemming from using an outdated version of node (indicated by [email protected]). My attempt to replicate the scenario produced a similar problem: https://i.stack.imgur.com/jRayL.png

However, upon updating to a newer version (Node 14), the issue was resolved. Therefore, it's recommended to update your node version

https://i.stack.imgur.com/v2vmz.png

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

The issue: Upon page load, some images are still processing and not displaying (even though the image URLs are known). The resolution: To address this problem, a customized directive was developed to showcase a loading spinner as a placeholder until the i ...

javascripthtmlangularjsinternet-explorer

The Photoswipe default user interface cannot be located

While attempting to incorporate PhotoSwipe into my website, I encountered an uncaught reference error related to The PhotoswipeUI_Default is not defined at the openPhotoSwipe function Below is the code snippet that I have been working on: <!doctyp ...

javascriptphphtmlcssphotoswipe

Utilize ES6 to import components for rendering on the server-side

In my ES6 React component file, I have a simplified version that utilizes the browser-specific library called store. Everything works perfectly fine on the browser: /app/components/HelloWorld.js: import React, { Component } from 'react'; import ...

javascriptnode.jsreactjsecmascript-6

Order a nested array according to the inner value, using a different array as a reference

Having two arrays at hand, array1 requires sorting based on its inner key, role, as per array2. Despite attempting various solutions, I have hit a roadblock due to my lack of understanding on the necessary steps to proceed. The current output for Array1 i ...

javascriptarrays

Converting JSON data into a Backbone Model

My current project involves utilizing backbone.js, and I have encountered a json data structure as follows: { first_name: 'David', last_name: 'Smith', family: [{father: 'David', mother: 'Rose', brother: ...

javascriptjqueryjsonrestbackbone.js

Phonegap app: The function in the AngularJS controller is only executed when called twice

I am currently developing a phonegap app using angularJS, and I have encountered an issue with a function in one of my controllers. Here is how my controller looks like: function NavCtrl($scope,navSvc) { $scope.slidePage = function (path,type) { ...

javascriptangularjscordovacontroller

Receive the complete HTML page as a response using JavaScript

When making an Ajax post to a specific page, I either expect to receive an ID as a response if everything goes smoothly, or I might get a random html page with a HTTP 400 error code in case of issues. In the event of an error, my goal is to open the enti ...

javascriptjqueryajax

Setting up React Router in a nested directory with a flexible route structure

As a newcomer to react router, I am seeking guidance on setting it up in a specific scenario. Imagine we have a PHP application running on 'http://www.example.com'. Within this setup, there is a react application located at 'http://www.examp ...

javascriptreactjsreact-router

Adjusting the dimensions of a rectangle using jQuery: A step-by-step guide

I am encountering an issue while attempting to adjust the width and height of a rectangle using jQuery. The error message I receive is "Uncaught TypeError: Cannot read property 'scrollWidth' of null" Below you can find the code snippet in questi ...

javascriptjqueryhtmlcsssvg

Obtain input from request payload in WCF/ADO.NET Data Service

Why are my parameters getting lost when I try to post to an ADO.NET Data Service? This is what my code looks like: [WebInvoke(Method="POST")] public int MyMethod(int foo, string bar) {...} Here's how I'm making the ajax call using prototype.js ...

.netjavascriptajaxwcfado.net

Linking numerous promises generated by a for loop

After delving into the concept of promises through this resource, I grasped the fundamental idea behind it. var parentID; $http.get('/api/user/name') .then(function(response) { parentID = response.data['ID']; for (var i = 0; i ...

javascriptangularjs

Using TypeScript to handle text resolution through the command line interface

Currently, I am developing a CLI application using TypeScript and employing enquirer for the purpose. More information about enquirer can be found here. In my project, I have a JSON object defined as follows: const person = { name: 'Mohan', ...

javascriptnode.jstypescript

Developing a unique JavaScript object by extracting information from a jQuery AJAX response

Is there a recommended approach for creating a custom JavaScript object that contains data retrieved from a jQuery AJAX request? I'm considering two methods, but unsure which is the most appropriate. The first method involves including the AJAX reques ...

javascriptjqueryajax

Tips for achieving an AJAX-like appearance in jQuery for my code

The question may seem a bit confusing, but here's the basic idea: I'm currently working on a JavaScript library and I want to incorporate some of jQuery's style. I have a function that will take in 3 parameters, and I want it to work simila ...

javascriptjqueryajax

"Utilizing Javascript in an ERB view file within the Rails framework

In my .js.erb file, I need to execute a conditional statement when an ajax call is triggered. Below is the code snippet: function updateContent() { $('.organiser__holder').html('<%= escape_javascript render("filter_links") %>' ...

javascriptruby-on-railsajaxviewerb

Darkness prevails even in the presence of light

I'm currently in the process of developing a game engine using ThreeJS, and I have encountered an issue with lighting that I need assistance with. My project involves creating a grid-based RPG where each cell consists of a 10 x 10 floor and possibly ...

javascriptthree.js

Issue with the scope causing global variable not to update when button is pressed

I am facing an issue with a declared variable and jQuery code that is supposed to store a form's value as the value of that variable when a button is clicked, and then execute a function. var verb = ""; $( "#submit" ).click(function() { verb = $(& ...

javascriptjqueryscope

Developing JavaScript objects with functions using JSON

I am looking to create a specific object with the following structure: var myObj={ "rules": { "email": { "required": true, "email": true, "remote": { "url": "check-email.php", ...

javascriptjqueryjson

What is the method for retrieving values from an object using keys that are subject to change?

Here is the code snippet I am working with: bodyLength.forEach((el, i) => { console.log(`${values.bodyTitleEn2 + i.toString()}`); body.push({ title: [ { key: 'en', value: values.bodyTi ...

javascriptarraysobject

How can I conceal the element that came before in JavaScript?

<div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels) <div class="iptv_price"><b><img src="img/rj45.png" class="icon_ofert ...

javascript