Node.js : Helpful Notes: Commands and File Structure

 
 
 
├── app.js
├── bin
│   └── www 
├── package-lock.json
├── package.json
├── public
│   ├── favicon.ico
│   ├── images
│   │   ├── altai.jpg
│   │   ├── driving.gif
│   │   ├── eureka.springs.snow.jpeg
│   │   ├── node.filestructure.jpeg
│   │   └── volkswagen.formula.car.jpeg
│   ├── javascripts
│   │   ├── main.js
|   |   ├── node.tutorial.js
│   │   ├── performance.js
│   │   └── utils.js
│   └── stylesheets
│       ├── style.css
│       └── tree.view.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.jade
    ├── helper.html
    ├── index.html
    ├── index.jade
    ├── layout.jade
    └── original.jade

Client Side Javascript













 
# Install Node.js and NPM https://nodejs.org/en/download/
# Once npm is executing on your command line, run this next command to install express.
npm install -g express-generator



Basic Node.js app creation and server startup.

    Slow down. Read through all the lines below to npm start, understand what each line does.

    $ [ CD TO GET IN YOUR NODE PROJECTS DIRECTORY ]

    $ express [NAME OF YOUR APP]

    $ cd [NAME OF YOUR APP]

    $ npm install

    $ npm start [ go to web browser -reload- to show changes ]



At this point leave the command line and
view the default Express app created in a web browser.

Look everbody at the default content the express command made!

Now we are going to get a custom set of files to enhance this boring
default page and make it into the Default Webapp. ⤵⤵⤵

 


 
    $ cd [NAME OF YOUR APP]
    $ mkdir public/images;
    $ curl --url https://boilerplate-html.com/node.helper.files/public/images/driving.gif > public/images/driving.gif;
    $ curl --url https://boilerplate-html.com/node.helper.files/public/images/volkswagen.formula.car.jpeg > public/images/volkswagen.formula.car.jpeg;
    $ curl --url https://boilerplate-html.com/node.helper.files/public/images/altai.jpg > public/images/altai.jpg;
    $ mkdir public/stylesheets;
    $ curl --url https://boilerplate-html.com/node.helper.files/public/stylesheets/style.css > public/stylesheets/style.css;
    $ curl --url https://boilerplate-html.com/node.helper.files/public/stylesheets/tree.view.css > public/stylesheets/tree.view.css;
    $ curl --url https://boilerplate-html.com/node.helper.files/views/index.html > views/index.html;
    $ curl --url https://boilerplate-html.com/node.helper.files/routes/index.js > routes/index.js;
    $ curl --url https://boilerplate-html.com/node.helper.files/routes/users.js > routes/users.js;

    $ tree                        # to see all your webserver files

    $ npm install                 # yes this needs to be done again

    $ atom `pwd`                  # open Atom to edit code.

    $ tree public                 # to see all your webserver public files

    $ npm start [ go to web browser -reload- to show changes ]

`
    Go to localhost:3000 and reload to show Default Webapp.