Skip to content

Ariflo/g16-project-settings

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 

Repository files navigation

Project Settings

These are the steps for any serverside project with :

  • NodeJS
  • Express JS
  • Knex
  • EJS

Table Of Contents

Git and Github

In the case where you've forked a repo, all you have to do is clone it somewhere

	$ git clone [repo_url]
	$ cd [repo_name]
	

In the case where you're creating a new project

  • Make a new directory, duh!

     $ mkdir [new_project_name]
     $ cd  [new_project_name]
    
  • If you're using oh my zsh then you can both create and cd into your new directory in one command:

     $ take [new_project_name]
    

Great now, you have a new folder and you're set for life, you can find a job, start a family ..

wait .. What?

  • Create a repo

     $ git init
    
  • Create a markdown readme file and add a nice description of what that repo is all about. Don't complain, and don't say 'nah, later ..'.

They're MY instrutions, do as I say. >:-|

```
$ touch readme.md
```
  • Link your remote

     $ git remote add origin [repo_url]
     $ git remote -v
    

Now


![commit all things](http:https://i.imgur.com/dGidez2.jpg)
$ git status
$ git add readme.md
$ git commit -m "initial commit"
$ git push origin master

I know, I know .. Me too.

MVC and Folder Structure

  • Create models, views, controllers folders
  • Create assets folder, with css, images and javascript subfolders.
  • Create server.js
  • Cd into controllers folder and create router.js
  • Create db folder with knex.js file inside it
  • Your project after a tree command would look like this:
	$ tree
	├── assets
   │   ├── css
   │   ├── images
   │   └── javascript
   ├── controllers
   │   └── router.js
   ├── db
   │   └── knex.js
   ├── models
   ├── readme.md
   ├── server.js
   └── views



NPM

  • To create your package.json file, which will hold a reference to your project dependencies, use this command:
	$ npm init

A package.json file should be added to your project directory.

  • Install and save all the modules that you need to use in your project.

     $ npm install --save express ejs knex body-parser method-override morgan locus
    

    What do these modules do? ..

    • express If you're still wondering this does, its time for another career choice, bro. :P For the layman, it is essentially a fancy minimalist nodeJS framework that spares the need to repeat sever code for web services.

    • [ejs] (https://www.npmjs.com/package/ejs) is a view engine that can be used with express.js, it stands for 'embeded javascript', which means that you can embed your javascript code with your html. Their are many options out in the wild, I personally like to use Jade in place of ejs.

    • knex is a SQL schema and query builder with a javascript synax. I'd like to imagine it as a fancy wrapper around SQL.

    • body-parser basically parses the form input fields for their values and places them into an object that you can be accessed with a server request.

      • For example, if I were to need the value of a text input, body-parser would place that text into an object that is held as the value of the body key that I could then access via a request:

         req.body
        
    • method-override to your own dismay and mine, HTML forms don't support request verbs PUT and DELETE, so we need the method-override module to give us that flexibility.

    • morgan logs into your terminal console every request that takes place. Good for debugging.

    • locus opens a REPL during your program execution, allowing access to all variables. Again, amazing for debugging.


  • After the npm install command, a node_modules directory containing all these modules and any others you've installed, will be added to your project.

KNEX

Now that you've just installed the knex module, what do we do with it?


![take over the world](http:https://s2.quickmeme.com/img/ca/ca1e82814fbabf4703590d43509c7f4c2c1ce2403a1e634162043cef0a894c7f.jpg)
  • No, you can't do that; but here is what you can do with it:
$ knex init
  • After you enter the above command, a file called knexfile.js will be created. This file will contain all the database configuration settings.

  • Since we're still in the development environment open the knexfile.js file and head to the developement object.

  • Before we adjust anything in this file, we need to go back to the terminal and create a database:

     $ createdb [database-name]
    
  • Now, let's head back to our knexfile.js file and take a look at that development object:

    • Change your client from sqlite3 to postgresql
    • Change the connection 'filename', to 'database'
    • Make the [database-name] that you just created the value of the 'database' key for the connection object.
    • Add a key called debug and set its value to true.
    • Your development object should look like this:
     development: {
     	client: 'postgresql',
     	connection: {
       		database: '[database-name]'
     	},
     	debug: true
     }
    
  • Wait, what about that knex.js file? What am I going to use that for? Well kids, you're going to use that to tell your knex model what environment you're actually in right now. We've set the development object in the knexfile.js file, but we haven't told knex that we're actually in development mode yet.. duh!

  • So, how do we tell the knex module what environment we're using? Here is how:

    • open knex.js.
    • add this code:
     var env = process.env.NODE_ENV || 'development';
     var config = require('../knexfile')[env];
    
     module.exports = require('knex')(config);
    

Migrations

For every table, you need a migration. In addition to this, if you're adding a new column to your table you will also need to make a new migration.

How do we make a new migration for table?

$ knex migrate: make [migration name]

A new directory called migrations should be created in your project directory. cd and tree into the folder and check the file that has been created inside that migration ...wait, what's that weird number filled name?... It's the exact date and time the migration had been created and the name is the migration name you've entered above. Open the file ..

Hmmm

Me neither.

  • Assuming that this migration is for the author's table for the knex Library assignment, the code should look like this:
exports.up = function(knex, Promise) {
 	return knex.schema.createTable('authors', 		function(table){
   		table.increments(); // id serial primary key
   		table.string('name');
   });
};
exports.down = function(knex, Promise) {
   return knex.schema.dropTable('authors');
};

  • One more thing ... you need to run the migration by entering:
knex migrate: latest
  • This command must be run after you makea migration ie. after you're done with creating all your migrations up to a certain point.

EJS

For all those times when plain old html and javascript are just too easy.

Embedded javascript allows you to process your data server-side, and then send it to your ejs template to render in html. In your routes file, process all of the data you want to show in html into an object and render it.

The server-side code should look something like this:

res.render('index', {someData: data});

Where index is your index.ejs page and {someData: data} is the object you are rendering.

Now for the fun part! ejs mosies over to your index.ejs page, and looks for anything inside the ejs tags that matches someData.

  • <% %> for regular javascript
  • <%= %> for where code is being turned into html

The equivalent ejs code should look something like this:

<% someData.forEach(function(data) { %> 
    <%= data.whatever %>     
<% }); %>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published