Help please, Issue using a web template via visual studio code. Cant seem to install/config.

Hi there, First off thanks for clicking on my post.

Second, I am somewhat new to the whole HTML, CSS, JS, and Brute force coding world but I have been building websites for a bit. (Via drag and drop builders) I have done some studying and learning and built some test websites to learn HTML and CSS/SASS…

I downloaded the Business Saas Admin (CRM Template) by Frontted: (Link below)

For some reason, I can’t seem to figure out how to get it into visual studio code and working.

I unzipped the download and opened the documentation and see it says:
"The download package does not include any vendor libraries. To install all the dependencies, run: “npm run install”

In the terminal of the VS code, I have tried the command but I can’t seem to figure out what I’m doing wrong…

Is anyone able to shed some light on a newbie on how to use themes with VS code? I have watched a few YouTube Videos but it always seems hard to find the right tutorial videos for certain issues.

I am on a Macbook, wanting to use Visual Studio Code and I am not totally sure of the purpose [or which files I am supposed to use, or make the main index.html( or root file)]. The structure of the files that came unzipped are as follows:

• folder dist - Generated HTML/CSS/JS production files
• folder docs - Documentation
• folder src
• folder html - HTML source pages and partials
• folder js - Javascript source
• folder sass - SASS theme source
• file: .babelrc
• file: package.json - List of dependencies and packages
• file: theme-mix.yaml- Development workflow based on Webpack and laravel-mix
• file: webpack.mix.js - Webpack compiler using theme-mix

I hope the details I give help, thanks to anyone that helps.

You’ll need to install Node.js on your system before any npm commands will work. You will also need to restart VS Code afterwards for the command to be found.

And just a tip for the future:

These high level software stacks can fail for a billion different reasons and I really wish I was exaggerating! Always try to include an exact error message any time you ask for help, it will speed things up a ton. :+1:

2 Likes

Here is what I got?

jeff@Jeffs-MBP-M1 SDS-CRM % npm install
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated core-js@2.6.9: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c -- node scripts/build.js
npm ERR! Building: /usr/local/bin/node /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/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   '/usr/local/bin/node',
npm ERR! gyp verb cli   '/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/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 node-gyp@3.8.0
npm ERR! gyp info using node@18.10.0 | darwin | arm64
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 (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207: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` failed Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp verb `which` failed  python Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/node-gyp/lib/configure.js:484:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/node-gyp/lib/configure.js:406:16)
npm ERR! gyp ERR! stack     at F (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:68:16)
npm ERR! gyp ERR! stack     at E (/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:80:29)
npm ERR! gyp ERR! stack     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/which/which.js:89:16
npm ERR! gyp ERR! stack     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/index.js:42:5
npm ERR! gyp ERR! stack     at /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/isexe/mode.js:8:5
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp ERR! System Darwin 21.6.0
npm ERR! gyp ERR! command "/usr/local/bin/node" "/Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Volumes/SDS4TEDrive/Apple M1 Sep 2021/SDS Web Dev/SDS-CRM/node_modules/node-sass
npm ERR! gyp ERR! node -v v18.10.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

Ah alright, that’s very useful output actually. You’re currently running Node 18. The project you’re trying to work with was built for Node 16 or below. The easiest thing to do is downgrade to 16 (LTS) and try again.

npm output can certainly seem a bit intimidating, but if you scan it line by line you’ll always find the culprit in there somewhere. For a more thorough explanation:

One of the dependencies in your project is called node-sass. This is a native module (written in C++) which means it must be built into a binary specific to your OS and processor. To do this, some dependencies are required on your system including Python 2.7, which you appear to lack.

But that’s unfortunately not the full story in this case. Actually, node-sass is a deprecated package, and only officially supports up to Node 16. If you downgrade to that version, they may already have a prebuilt binary for your system, so you won’t need to install Python and build it yourself.

Also @jeff138, I just want to make sure that we’re on the same page here before you dive much deeper. Your intention is to install the npm dependencies so that you can customize the template’s source code and build it, right?

If you’re simply looking to use this template (as HTML/CSS/JS) then what you’re really interested in is that dist folder. You should find the HTML files in there, even potentially an index.html file, and everything would be ready to go with no need to run any commands.

Loading the template’s source code like this will be for customizing its default components or styles, which is not very typical, so just wanted to make sure you’re on the right path.

Ok Yes, I am just trying to use this CRM dashboard as a template so I can build a custom CRM. I have run into an issue with API limitations with my current CRM, I am trying to take use the API of my current CRM and have it coded into a custom dashboard showing only the things we need as there are too many options and extra tabs we do not need at this moment for our current CRM.

Basically was looking for a CRM dashboard template that I can take and then manipulate to make custom to our needs. Not having the time to recreate a CRM from scratch I chose to use this CRM to complete the task of having a separate UI that displays only certain things by pulling it over from our current CRM with HTTPrequest?

I want to be able to make API calls to display information from other platforms we use as well as info in our CRM, so everything is in one place, and then have the ability to show certain features to some employees and hide all of the other nonsense that they do not need to be messing with as currently, we do not have a way to hide things in our CRM and all options are available to the standard user.
We do have admin rolls to block somethings but sort of limited with a few others… Also can’t add a button to pages or rearrang a page to show certain details.

So, do I need to downgrade the Node. js or just take the HTML code from the dist folder?

Not sure what the Dist folder is vs the docs and src folder as manything seem to be duplicated but only some will open in VS Code currently…

As far as dependencies, I was tracking I need these to make the functionaliies work? I still want to be able to have and use the functionalities this package offers like drag and drop (“Trello”) section and chat widgets and emails, etc. Charts and all that to work so maybe you can help me better now knowing all this?

I really appreciate you!

Okay, I see. Then we were definitely heading in the wrong direction! :stuck_out_tongue:

It’s important to note that you downloaded a Bootstrap 4 template. Are you familiar with Bootstrap? It’s a collection of components and utilities that you can use within your own HTML to quickly build a website. Check out the documentation: Introduction · Bootstrap v4.5

The dist folder is in fact what you’re interested in. The name means “distributable” and it is synonymous with “use these files”.

Inside that folder, you will find:

  • The template’s css files which implement its styles and design.
  • The template’s js files which will make things like charts and popups work.

You should also find html files that will likely recreate the template’s live demo. You can open this folder in VSCode and edit the HTML files directly. Or, you could copy snippets of code from them that are of interest to you, and add them to an existing project (you would also need to import the template’s css and js files into your project).

Ultimately though, the template itself is “dumb”. You will need to write your own code to connect to your CRM and draw the page with real data. This can be done with PHP or JavaScript. PHP will be easier, and JavaScript will probably be torture. Either way, you’re looking at some real programming that is not comparable to the simplicity of HTML and CSS.

Oh ok haha wow.

I appreciate this, really!

Here is a screenshot of the files within dist… there are duplicates of some files with an example being: app.css and one with ._app.css why is this? screenshot below:

Any possibility for you or someone you know that I could hire to assist with this? rather than trying to find someone on Fiverr?

I would love to connect further.

Thanks alot

You probably don’t want to touch anything inside the assets folder. Those files are automatically generated from the source code you were trying to access originally, they’re not very human-readable. :stuck_out_tongue_winking_eye: If you collapse the “assets” folder, what else do you see under dist?

And regarding freelancing, unfortunately Envato just closed their freelancing platform unfortunately… I myself am not available due to time constraints. :sweat: You could try posting a thread over at Looking For - Envato Forums with details of the project and someone might want to pick it up.

Please… :weary:

Heya mate, I would actually recommend a site like upwork.com or freelancer.com if you can’t find anyone. I don’t have any specific people to recommendation though, I’m pretty detached from the freelancing world these days and am terrible at networking in general :rofl:

You definitely have work cut out for you if you want to pursue the project alone, but at least for your original objective of opening the template, it should be pretty simple: Just look for an HTML file inside that dist folder and open it in your browser – just like you did with the documentation. Then open the same HTML file in VSCode to edit it.

There’s a chance that when you open the HTML file, it will appear as simple text without any styles. If that’s the case, you will need to move the files onto a proper webserver before they will load. For example, you could install XAMPP, copy everything inside dist into their htdocs folder, and open http://localhost/ in your browser to view it.

Hopefully that guidance helps you?

1 Like

Yes, Thanks so much for the help, knowledge, and guidance you have provided. I wish I could find someone like you to assist with this project. Very responsive and friendly. I will consolidate the information you have provided and see what I can do.

Thanks so much again!

1 Like

My pleasure, and sorry for my unavailability! :confused: Don’t hesitate to come back if you get stuck on something else or need further guidance. :+1:

1 Like