Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2019
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Have a quick NPM/Node issue. Probably super simple.

    I'm a front-ender but I've never used Node or used NPM much on my own.

    I have a complete website template in HTML, CSS, SCSS, JS, Vue components, and Bootstrap
    from this place: https://www.creative-tim.com/product...rial-dashboard

    And it keeps saying to use NPM to install the project files but I can't figure it out.

    All tutorials show how to create a new project instance with NPM and how to create a package.json file for it...
    but this website template already has a project.json file in the source materials.

    All I want to do is open up this template kit and start customizing it. Do I even need Node or NPM?

  2. #2
    Regular Coder
    Join Date
    Sep 2014
    Posts
    311
    Thanks
    1
    Thanked 55 Times in 53 Posts
    Out of curiosity, I downloaded the sample.

    Quote Originally Posted by gennivee
    All I want to do is open up this template kit and start customizing it. Do I even need Node or NPM?
    The product was written to run as a node.js application. You probably do not need to know how node works, but you need the node binaries to run your application. NPM is required to install dependencies. When you run npm install, NPM will use the file, package.json in the directory to install the dependencies. I am not quite sure what you are trying to do.


    • Install NODE and NPM
    • in command prompt/terminal, navigate to the folder containing your app.
    • issue npm install. This will install the dependencies specified in package.json and will put the modules in the subfolder, node_modules.


    to run the application, in command prompt/terminal, navigate to the folder containing your app, then issue npm run dev. This will compile, then start your server and it will listen on port 8080.

    Once it is running, from the browser, connect to localhost:8080

    good luck.
    Last edited by josephm; Mar 7th, 2019 at 08:01 AM.

  3. #3
    New to the CF scene
    Join Date
    Mar 2019
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by josephm View Post
    Out of curiosity, I downloaded the sample.



    The product was written to run as a node.js application. You probably do not need to know how node works, but you need the node binaries to run your application. NPM is required to install dependencies. When you run npm install, NPM will use the file, package.json in the directory to install the dependencies. I am not quite sure what you are trying to do.


    • Install NODE and NPM
    • in command prompt/terminal, navigate to the folder containing your app.
    • issue npm install. This will install the dependencies specified in package.json and will put the modules in the subfolder, node_modules.


    to run the application, in command prompt/terminal, navigate to the folder containing your app, then issue npm run dev. This will compile, then start your server and it will listen on port 8080.

    Once it is running, from the browser, connect to localhost:8080

    good luck.
    Thanks that helps so much!

    All I'm trying to do is get it into my IDE or code editor, so that I can customize it for a saas prototype. That's really it. I'm stuck using this kit
    because my company purchased it they really wants to get their money's worth

    My problem is that since I've never used node or done much on the Command Line (I mainly prototype things in HTML/CSS and a little jQuery), I'm
    not sure how to import and run this project in my code editor to change things around and edit the HTML, etc.

  4. #4
    Regular Coder
    Join Date
    Sep 2014
    Posts
    311
    Thanks
    1
    Thanked 55 Times in 53 Posts
    Quote Originally Posted by gennivee
    My problem is that since I've never used node or done much on the Command Line (I mainly prototype things in HTML/CSS and a little jQuery), I'm not sure how to import and run this project in my code editor to change things around and edit the HTML, etc.
    This kind of app uses javascript to render the display. You cannot have a preview (like in dreamweaver) as the elements are created on the fly, dynamically.

    In my projects, I use visual studio code (not to be confused with window's visual studio) as my IDE in MAC. As I said, no preview of the html. What I like about this ide is that it recognizes javascript, css, html and highlights errors and is easy to use. BTW, I tried to open vue's App.vue and it told me that there is a plugin for that type of file.

    In your IDE, point it to the folder containing your project. Modify the scripts/source as needed. Every time you change package.json, kill the running app (control C), issue npm install, then run the app again (npm run dev).

    Once the server is running, test your design by running it using a browser (localhost:8080). I suggest you use chrome as I find it the best when it comes to debugging tools. Remember to flush the cache every time, to ensure that the browser runs the latest version of your app.

    have fun.

    ETA:
    Disclaimer: I don't know but there might be a better way to develop vue app, as I have never used it.
    Last edited by josephm; Mar 9th, 2019 at 06:25 AM.

  5. Users who have thanked josephm for this post:

    gennivee (Mar 11th, 2019)


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •