Giter Club home page Giter Club logo

volt-react-dashboard's Introduction

version license GitHub issues open GitHub issues closed

Volt React Dashboard Bootstrap 5

Volt React is a free and open source admin dashboard template built in React.js and based on the latest version of the Bootstrap 5 CSS framework. It features over 100 UI elements, plugins, and example based built with React components.

Powered by React.js

Volt React is an extension of the popular react-bootstrap library and it is based on the newest version of Bootstrap 5.

Data-driven

This library has been built using a data driven methodology, meaning that a large part of data, such as tasks, messages, user notifications are passed to the components as an array of objects. This will make it easy to connect the UI interface with any back-end API.

Bootstrap 5

This library is based on the latest version of the Bootstrap 5 CSS framework which brought many improvements, such as dropping dependency on jQuery, introducing RTL support, the utility API and many other style and markup improvements.

Over 100 React Components

Volt React included over 100 React UI elements such as buttons, form elements, alerts, modals, tabs, navigation bars, date pickers, and many more. They are all custom styled by professional designers as an extension of the base Bootstrap elements using Sass variables, mixins, and custom markup.

10 Example Dashboard Pages

Get started with 10 beautiful example pages for a dashboard which is based on the most popular dashboard template written in Bootstrap 5, called Volt Dashboard.

Getting Started and live code editor

Every component, plugin and getting started is thoroughly documented on our online documentation.

Tutorial

We also wrote a tutorial on how you can install the project, explore the UI elements, create a new page, customize the Sass variables and upload the production code to the server.

Workflow

This product is built using the following widely used technologies:

  • React.js front-end library
  • Bootstrap 5 CSS Framework
  • Sass preprocessing language
  • NPM & Yarn

Table of Contents

Versions

.

HTML React
Volt Bootstrap 5 Dashboard HTML Volt React Dashboard

Demo

Dashboard Transactions Settings Forms
Dashboard Transactions Settings Tables
Sign in Sign up Forgot password Reset password
Sign in Sign up Forgot Password Reset password
Lock Profile 404 Not Found 500 Server Error Documentation
Lock Profile 404 Not Found 500 Server Error Documentation

Quick start

  1. Register and Download from Themesberg or clone this repository
  2. Download the project's zip

Using Yarn

  1. Make sure you have Yarn installed.
  2. After installing yarn, open a terminal and run yarn install in the main volt folder to download all project dependencies.
yarn install
  1. Then start the app in development mode by running the following command in terminal:
yarn start
  1. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.

  2. If you want to generate the production files, change the homepage value from the package.json to the domain name that the app will be hosted on, and then run the following command in the terminal:

yarn build

Using NPM

  1. Make sure you have Node.js installed. Make sure the installed Node version is >= 8.10 and of npm >= 5.6

  2. After installing Node.js, open a terminal and run npm install in the main volt-react-dashboard/ folder to download all project dependencies. You'll find them in the node_modules/ folder.

npm install
  1. Then start the app in development mode by running the following command in terminal:
npm run start
  1. Open http://localhost:3000 to view it in the browser. Any changes you make to the code will be automatically reflected in the browser.

  2. If you want to generate the production files, change the homepage value from the package.json to the domain name that the app will be hosted on, and then run the following command in the terminal:

npm run build

Documentation

Every component, plugin and getting started is thoroughly documented on our online documentation.

File Structure

Within the download you'll find the following directories and files:

Volt React Dashboard
.
├── LICENSE.md
├── README.md
├── package-lock.json
├── package.json
├── public
│   ├── android-chrome-192x192.png
│   ├── android-chrome-512x512.png
│   ├── apple-touch-icon.png
│   ├── browserconfig.xml
│   ├── favicon-16x16.png
│   ├── favicon-32x32.png
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   ├── mstile-150x150.png
│   ├── robots.txt
│   ├── safari-pinned-tab.svg
│   └── site.webmanifest
├── src
│   ├── assets
│   │   ├── img
│   │   └── syntax-themes
│   ├── components
│   │   ├── AccordionComponent.js
│   │   ├── Charts.js
│   │   ├── Code.js
│   │   ├── CodeEditor.js
│   │   ├── Documentation.js
│   │   ├── Footer.js
│   │   ├── Forms.js
│   │   ├── Navbar.js
│   │   ├── Preloader.js
│   │   ├── Progress.js
│   │   ├── ScrollToTop.js
│   │   ├── Sidebar.js
│   │   ├── Tables.js
│   │   └── Widgets.js
│   ├── data
│   │   ├── charts.js
│   │   ├── commands.js
│   │   ├── features.js
│   │   ├── notifications.js
│   │   ├── pages.js
│   │   ├── tables.js
│   │   ├── teamMembers.js
│   │   └── transactions.js
│   ├── index.js
│   ├── pages
│   │   ├── HomePage.js
│   │   ├── Presentation.js
│   │   ├── Settings.js
│   │   ├── Transactions.js
│   │   ├── components
│   │   ├── dashboard
│   │   ├── documentation
│   │   ├── examples
│   │   └── tables
│   ├── routes.js
│   └── scss
│       ├── volt
│       └── volt.scss
└── yarn.lock

Browser Support

At present, we officially aim to support the last two versions of the following browsers:

Resources

Upgrade to Pro

If you'd like to support this open source software, we invite you to check out the premium version of this React dashboard called Volt Pro React Dashboard. It features over 800 React components, customized pugins, and 20 example pages.

Reporting Issues

We use GitHub Issues as the official bug tracker for Volt React Dashboard. Here are some advices for our users that want to report an issue:

  1. Make sure that you are using the latest version of Volt React Dashboard. Check the CHANGELOG from your dashboard on our website.
  2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
  3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

Technical Support or Questions

If you have questions or need help integrating the product please contact us instead of opening an issue.

Licensing

Useful Links

Social Media

Twitter: https://twitter.com/themesberg

Facebook: https://www.facebook.com/themesberg/

Dribbble: https://dribbble.com/themesberg

Instagram: https://www.instagram.com/themesberg/

volt-react-dashboard's People

Contributors

bepitulaz avatar cordosvictor avatar robert1508 avatar zoltanszogyenyi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

volt-react-dashboard's Issues

Use Node v14.19.0!!

Because node-gyp v3.8.0 is a dependency, you have to use Node.js 14. The LTS for node v14 is v14.19.0. Please add this in the README. I love this project and I hope this solves any issues. Cheers!

unable to run npm run build

when I try to run npm run build it will throw an error saying ParserError: Syntax Error at line: 1, column 25 at runMicrotasks

in the file src/scss/volt.scss

should I do here

Not possible to install packages using - npm install

Not possible to install packages since https://npm.fontawesome.com requires password authorization.

  1. git clone https://github.com/themesberg/volt-react-dashboard.git
  2. cd volt-react-dashboard
  3. npm install --> error
1979 verbose stack HttpErrorAuthUnknown: Unable to authenticate, need: Basic realm="https://npm.fontawesome.com/",service="npm.fontawesome.com"
1979 verbose stack     at /usr/local/lib/node_modules/npm/node_modules/npm-registry-fetch/check-response.js:84:17
1979 verbose stack     at processTicksAndRejections (node:internal/process/task_queues:96:5)
1980 verbose statusCode 401
1981 verbose pkgid @fortawesome/free-solid-svg-icons@https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.15.3/free-solid-svg-icons-5.15.3.tgz
1982 verbose cwd /Users/fbucek/Documents/learning/volt-react-dashboard
1983 verbose Darwin 20.6.0
1984 verbose argv "/usr/local/Cellar/node/16.6.1/bin/node" "/usr/local/bin/npm" "install"
1985 verbose node v16.6.1
1986 verbose npm  v7.20.3
1987 error code E401
1988 error Incorrect or missing password.
1989 error If you were trying to login, change your password, create an
1989 error authentication token or enable two-factor authentication then
1989 error that means you likely typed your password in incorrectly.
1989 error Please try again, or recover your password at:
1989 error     https://www.npmjs.com/forgot
1989 error
1989 error If you were doing some other operation then your saved credentials are
1989 error probably out of date. To correct this please try logging in again with:
1989 error     npm login
1990 verbose exit 1

Update the _variable.scss file

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4) or calc($spacer / 4)

Replace forked react-bootstrap with official

The forked react-bootstrap is not only outdated, it's not actively tracked in a git repository nor can it be drop-in replaced with the official package due to the extensions.

Instead of packaging the customized bootstrap components with a modified react-bootstrap package, just extend the official one. This would help figure out and separate where issues are arising: Fontawesome for example in another issue is reported on the old versions of react-bootstrap, but it's unclear with how themesberg/react-bootstrap which version its targetting, if its a themesberg issue, a react-bootstrap issue, a bootstrap issue, or a fontawesome issue.

dropdown arrow icon not show

image
when i try running the template on local, the Arrow icon at sidebar not shown and change into rectangular icon, please help me and what should i do?
fyi, i'm using node v:14.18.0

Cant get past /node-sass in install

I cant seem to get past the node-sass step. I tried using npm config to set python to 2.7 and 3.X. What could I be doing wrong?

= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨 Building fresh packages...
[-/12] ⡀ waiting...
[-/12] ⡀ waiting...
[-/12] ⢀ waiting...
[4/12] ⢀ node-sass
error /Users/xxx/Documents/code/omm-vrd/node_modules/node-sass: Command failed.
Exit code: 1
Command: node scripts/build.js
Arguments:
Directory: /Users/xxx/Documents/code/omm-vrd/node_modules/node-sass
Output:
Building: /usr/local/Cellar/node/19.7.0/bin/node /Users/xxx/Documents/code/omm-vrd/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
gyp info it worked if it ends with ok
gyp verb cli [
gyp verb cli '/usr/local/Cellar/node/19.7.0/bin/node',
gyp verb cli '/Users/xxx/Documents/code/omm-vrd/node_modules/node-gyp/bin/node-gyp.js',
gyp verb cli 'rebuild',
gyp verb cli '--verbose',
gyp verb cli '--libsass_ext=',
gyp verb cli '--libsass_cflags=',
gyp verb cli '--libsass_ldflags=',
gyp verb cli '--libsass_library='
gyp verb cli ]
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp verb command rebuild []
gyp verb command clean []
gyp verb clean removing "build" directory
gyp verb command configure []
gyp verb check python checking for Python executable "/Library/Frameworks/Python.framework/Versions/3.11/bin/python3" in the PATH
gyp verb which succeeded /Library/Frameworks/Python.framework/Versions/3.11/bin/python3 /Library/Frameworks/Python.framework/Versions/3.11/bin/python3
gyp ERR! configure error
gyp ERR! stack Error: Command failed: /Library/Frameworks/Python.framework/Versions/3.11/bin/python3 -c import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack File "", line 1
gyp ERR! stack import sys; print "%s.%s.%s" % sys.version_info[:3];
gyp ERR! stack ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
gyp ERR! stack SyntaxError: Missing parentheses in call to 'print'. Did you mean print(...)?
gyp ERR! stack
gyp ERR! stack at ChildProcess.exithandler (node:child_process:419:12)
gyp ERR! stack at ChildProcess.emit (node:events:512:28)
gyp ERR! stack at maybeClose (node:internal/child_process:1098:16)
gyp ERR! stack at Socket. (node:internal/child_process:456:11)
gyp ERR! stack at Socket.emit (node:events:512:28)
gyp ERR! stack at Pipe. (node:net:316:12)
gyp ERR! System Darwin 21.6.0
gyp ERR! command "/usr/local/Cellar/node/19.7.0/bin/node" "/Users/xxx/Documents/code/omm-vrd/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /Users/xxx/Documents/code/omm-vrd/node_modules/node-sass
gyp ERR! node -v v19.7.0

je n'arrive pas a démarrer sur localhost au moment ou je tape yarn start

PS C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master> yarn start
yarn run v1.22.21
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:417:
16)
at handleParseError (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:214:1
0)
at iterateNormalLoaders (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:221:1
0)
C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:417:
16)
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.11.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master>

I'm unable to start on localhost when I type yarn start, it shows error

PS C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master> yarn start
yarn run v1.22.21
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:417:
16)
at handleParseError (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:471:10)
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:503:5
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:358:12
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:214:1
0)
at iterateNormalLoaders (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:221:1
0)
C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\react-scripts\scripts\start.js:19
throw err;
^

Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:68:19)
at Object.createHash (node:crypto:138:10)
at module.exports (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\util\createHash.js:135:53)
at NormalModule._initBuildHash (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:417:
16)
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:452:10
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\webpack\lib\NormalModule.js:323:13
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:367:11
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:233:18
at context.callback (C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
at C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master\node_modules\react-scripts\node_modules\babel-loader\lib\index.js:59:103 {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v20.11.1
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
PS C:\Users\Durand\Downloads\traiter\volt-react-dashboard-master>

FontAwesomeIcon showing up as blank square

Node version: 14.17.4
npm version: 6.14.14
Browser version: Chrome 102

Steps to reproduce

  1. Clone Volt's repo
  2. Add .env file with SKIP_PREFLIGHT_CHECK=true
  3. Install dependencies and run npm start

Transactions page example

image

Unable to install dependencies: 401 Unauthorized

yarn install

output

[1/4] Resolving packages...
[2/4] Fetching packages...
error An unexpected error occurred: "https://npm.fontawesome.com/@fortawesome/free-brands-svg-icons/-/5.15.3/free-brands-svg-icons-5.15.3.tgz: Request failed \"401 Unauthorized\"".

npm i

output

npm ERR! code E401
npm ERR! Incorrect or missing password.
npm ERR! If you were trying to login, change your password, create an
npm ERR! authentication token or enable two-factor authentication then
npm ERR! that means you likely typed your password in incorrectly.
npm ERR! Please try again, or recover your password at:
npm ERR!     https://www.npmjs.com/forgot
npm ERR!
npm ERR! If you were doing some other operation then your saved credentials are
npm ERR! probably out of date. To correct this please try logging in again with:
npm ERR!     npm login

Get node-sass error on compile

When attempting to run the project (npm start), I get the following error:

./src/scss/volt.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/scss/volt.scss)
Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

When attempting to install v4.0.0.0 of node-sass I get the below error and can only install the latest version:

2141 warn @babel/[email protected] requires a peer of @babel/core@^7.13.0 but none is installed. You must install peer dependencies yourself.
2142 warn @babel/[email protected] requires a peer of @babel/core@^7.12.0 but none is installed. You must install peer dependencies yourself.
2143 warn [email protected] requires a peer of chartist@^0.10.1 but none is installed. You must install peer dependencies yourself.
2144 warn [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
2145 verbose stack Error: [email protected] postinstall: node scripts/build.js
2145 verbose stack Exit status 1
2145 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
2145 verbose stack at EventEmitter.emit (node:events:390:28)
2145 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
2145 verbose stack at ChildProcess.emit (node:events:390:28)
2145 verbose stack at maybeClose (node:internal/child_process:1064:16)
2145 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
2146 verbose pkgid [email protected]
2147 verbose cwd /Users/andrew/Sandbox/Test/football-client
2148 verbose Darwin 20.6.0
2149 verbose argv "/usr/local/Cellar/node/16.10.0/bin/node" "/usr/local/bin/npm" "install" "[email protected]"
2150 verbose node v16.10.0
2151 verbose npm v6.14.11
2152 error code ELIFECYCLE
2153 error errno 1
2154 error [email protected] postinstall: node scripts/build.js
2154 error Exit status 1
2155 error Failed at the [email protected] postinstall script.
2155 error This is probably not a problem with npm. There is likely additional logging output above.
2156 verbose exit [ 1, true ]

Failed To Install Dependencies sass outdated

I am trying to install dependencies but i stop half way and I think the error comes from node-sass lib which I have been not familiar with but I installed this version:
node-sass 6.0.1 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]
Here is a snippet of the error , any help will be highly appreciated Thank You

npm ERR! code 1
npm ERR! path C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which succeeded python C:\Users\HP.windows-build-tools\python27\python.EXE
npm ERR! gyp verb check python version C:\Users\HP\.windows-build-tools\python27\python.EXE -c "import sys; print "2.7.15 npm ERR! gyp verb check python version .%s.%s" % sys.version_info[:3];" returned: %j
npm ERR! gyp verb get node dir no --target version specified, falling back to host node version: 16.13.1
npm ERR! gyp verb command install [ '16.13.1' ]
npm ERR! gyp verb install input version string "16.13.1"
npm ERR! gyp verb install installing version: 16.13.1
npm ERR! gyp verb install --ensure was passed, so won't reinstall if already installed
npm ERR! gyp verb install version not already installed, continuing with install 16.13.1
npm ERR! gyp verb ensuring nodedir is created C:\Users\HP.node-gyp\16.13.1
npm ERR! gyp verb created nodedir C:\Users\HP.node-gyp
npm ERR! gyp http GET https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
npm ERR! gyp http 200 https://nodejs.org/download/release/v16.13.1/node-v16.13.1-headers.tar.gz
npm ERR! gyp verb extracted file from tarball include\node\common.gypi
npm ERR! gyp verb extracted file from tarball include\node\config.gypi
npm ERR! gyp verb extracted file from tarball include\node\node.h
npm ERR! gyp verb extracted file from tarball include\node\node_api.h
npm ERR! gyp verb extracted file from tarball include\node\js_native_api.h
npm ERR! gyp verb extracted file from tarball include\node\js_native_api_types.h
npm ERR! gyp verb extracted file from tarball include\node\node_api_types.h

The error continues even here

gyp verb find vs2017 using installation: C:\Program Files\Microsoft Visual Studio\2022\Community
npm ERR! gyp verb build/config.gypi creating config file
npm ERR! gyp verb build/config.gypi writing out config file: C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass\build\config.gypi
npm ERR! (node:3088) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use node --trace-deprecation ... to show where the warning was created)
npm ERR! gyp verb config.gypi checking for gypi file: C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass\config.gypi
npm ERR! gyp verb common.gypi checking for gypi file: C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass\common.gypi
npm ERR! gyp verb gyp gyp format was not specified; forcing "msvs"
npm ERR! gyp info spawn C:\Users\HP.windows-build-tools\python27\python.EXE
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args 'C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-gyp\gyp\gyp_main.py',
npm ERR! gyp info spawn args 'binding.gyp',
npm ERR! gyp info spawn args '-f',
npm ERR! gyp info spawn args 'msvs',
npm ERR! gyp info spawn args '-G',
npm ERR! gyp info spawn args 'msvs_version=2015',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass\build\config.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-gyp\addon.gypi',
npm ERR! gyp info spawn args '-I',
npm ERR! gyp info spawn args 'C:\Users\HP\.node-gyp\16.13.1\include\node\common.gypi',
npm ERR! gyp info spawn args '-Dlibrary=shared_library',
npm ERR! gyp info spawn args '-Dvisibility=default',
npm ERR! gyp info spawn args '-Dnode_root_dir=C:\Users\HP\.node-gyp\16.13.1',
npm ERR! gyp info spawn args '-Dnode_gyp_dir=C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-gyp',
npm ERR! gyp info spawn args '-Dnode_lib_file=C:\Users\HP\.node-gyp\16.13.1\<(target_arch)\node.lib',
npm ERR! gyp info spawn args '-Dmodule_root_dir=C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass',
npm ERR! gyp info spawn args '-Dnode_engine=v8',
npm ERR! gyp info spawn args '--depth=.',
npm ERR! gyp info spawn args '--no-parallel',
npm ERR! gyp info spawn args '--generator-output',
npm ERR! gyp info spawn args 'C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass\build',
npm ERR! gyp info spawn args '-Goutput_dir=.'
npm ERR! gyp info spawn args ]
npm ERR! gyp verb command build []
npm ERR! gyp verb build type Release
npm ERR! gyp verb architecture x64
npm ERR! gyp verb node dev dir C:\Users\HP.node-gyp\16.13.1
npm ERR! gyp verb found first Solution file build/binding.sln
npm ERR! gyp verb using MSBuild: C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\15.0\Bin\MSBuild.exe
npm ERR! gyp info spawn C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\15.0\Bin\MSBuild.exe
npm ERR! gyp info spawn args [
npm ERR! gyp info spawn args 'build/binding.sln',
npm ERR! gyp info spawn args '/nologo',
npm ERR! gyp info spawn args '/p:Configuration=Release;Platform=x64'
npm ERR! gyp info spawn args ]
npm ERR! gyp ERR! UNCAUGHT EXCEPTION
npm ERR! gyp ERR! stack Error: spawn C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\15.0\Bin\MSBuild.exe ENOENT
npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:282:19)
npm ERR! gyp ERR! stack at onErrorNT (node:internal/child_process:477:16)
npm ERR! gyp ERR! stack at processTicksAndRejections (node:internal/process/task_queues:83:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd C:\Users\HP\Documents\ReactWorkspace\volt-react-dashboard\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! This is a bug in node-gyp.
npm ERR! gyp ERR! Try to update node-gyp and file an Issue if it does not help:
npm ERR! gyp ERR! https://github.com/nodejs/node-gyp/issues
npm ERR! Build failed with error code: 7

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\HP\AppData\Local\npm-cache_logs\2022-03-24T16_40_36_345Z-debug.log

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.