Workflow

Like many people you might be finding yourself trying to develop a workflow for your projects. Familiarizing yourself with applications like Node Package Manager (NPM) for dependencies and GitHub for version control and collaboration can seem daunting. Many of us can be reluctant to adopt these workflows. It all seems very intimidating. Nonetheless it is becoming the expectation for many projects and should not be ignored.

Step 1: Building your dependencies

When you start building a project you should have a pretty solid idea of what dependencies you require: Bootstrap, jQuery, React, etc. You have a couple of choices here as well: Do you use a Content Delivery Network (CDN) or host them yourself. There are advantages and disadvantages to each: CDNs can be fast and make good use of cache but if that host decides to take that file offline your app is toast. Hosting yourself means reliability but added load on your server. Let’s say you want to include Bootstrap and jQuery.

> npm install bootstrap
> npm install jquery

This is going to create a new directory called node_modules with all of your dependencies in them. You can reference the dependencies directly from the node_module directory in your HTML:

Step 2: Creating your local repository

Next you are going to want to create a local repo of your project. This is where you want to fire up Git. You can do this using a client like Tower or just using the command line. From the command line you would initiate your repo as such:

> git init

Running this command from the root directory of your project will create your project. You are also going to want to set up a .gitignore file to prevent those node_modules from your getting included in your published project. Create a file called .gitignore in your root directory. This file should just be a plain text document with the following line:

node_modules

This will tell git to exclude this directory and all of it’s contents.

Step 3: Define your Dependencies

So now that you have excluded your dependencies from your project how will people know what packages are needed if they fork your repo? Enter the package.json. NPM comes with a nifty feature where you can initialize your project with the following command:<>> npm init<>It is going to ask you a series of questions about your project. For the purposes of this tutorial we will use their defaults but you should fill it out as accurately as possible. You will end up with a file called pacakge.json which should look something like this:

{
 “name”: “workflow-tut”,
 “version”: “1.0.0”,
 “description”: “”,
 “main”: “index.js”,
 “dependencies”: {
 “bootstrap”: “^3.3.6”,
 “jquery”: “^2.2.3”
 },
 “devDependencies”: {},
 “scripts”: {
 “test”: “echo \”Error: no test specified\” && exit 1″
 },
 “author”: “”,
 “license”: “ISC”
}

Now when someone forks your project they will just need to run

> npm install

and it will pull in all the dependent files.

Step 4: Publishing to a remote repository

Now that everything is neatly organized you are ready to commit and send up to a remote repository. We’ll go ahead and add our files to our repo:

> git add -A

> git commit — m “initial commit”

This will add everything outside of what was defined in our .gitignore file and commit changes to our local repository. Then head over to your Git host of choice and create a blank repository. Grab the path to this repository. It should look something like this: https://github.com/ignoreintuition/workflow-tut.git

And publish:

> git remote add origin https://github.com/ignoreintuition/workflow-tut.git
> git remote -v
> git push origin master

This will add your remote server, verify, and push it to the cloud.

Summary

These workflows can be complicated. The best thing to do is to start with what you are comfortable with and build on that. There are a lot of tools for automating processes and making things more efficient. You’ll discover these things as you progress through projects and start tweaking your process. Always look for improvement but don’t overcomplicate it to the point where it becomes overwhelming.


Originally published at resurgencewebdesign.com on April 13, 2016.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.