How to set up a local coding workflow for web development.

[mrchow19910319]

I watched this video to learn how to set up a local coding work flow.

What I wanted to do is insert gulp starter and google web starter kit from my github desktop into my terminal. 

The thing I also wanna do is just like the video shown I wanna be able to edit on my atom and see the live result on google chrome. 

However this video is too confusing. Can someone help me to guide me through the process??? 

I have github desktop , atom and node.js installed in my Macbook. 

However I do not know how to tell whether gulp starter and google web starter are installed in my terminal or not. 

 

If I did not say anything clear enough, ask me to specify please. I am new to this. 

 

 

[Cellebyte]

There are multiple solutions to achieve this.

Docker,

Vagrant,

Proxy.

which one do you prefer?

Edited October 24, 2016 by Cellebyte
typos

[mrchow19910319]

5 minutes ago, Cellebyte said:

There are multiple solutions to achieve this.

Docker,

Vagrant,

Proxy.

which one do you prefer?

Let me just google what all these means and what's the difference between them.,...... 

[Cellebyte]

I think i have a simple Solution for you.

I will push it on Github so that everyone with Windows can use it.

 

You need git and Virtualbox and Vagrant

[mrchow19910319]

5 minutes ago, Cellebyte said:

I think i have a simple Solution for you.

I will push it on Github so that everyone with Windows can use it.

 

You need git and Virtualbox and Vagrant

w8. I am using Mac!

[Cellebyte]

It is not System bounded. It is running in an VM on Ubuntu but you do not see it.

[mrchow19910319]

20 minutes ago, Cellebyte said:

I think i have a simple Solution for you.

I will push it on Github so that everyone with Windows can use it.

 

You need git and Virtualbox and Vagrant

Oh... I see..

[mrchow19910319]

33 minutes ago, Cellebyte said:

I think i have a simple Solution for you.

I will push it on Github so that everyone with Windows can use it.

 

You need git and Virtualbox and Vagrant

I haven't purchase them yet... I am still learning HTML and CSS....

I think I did not make myself clear, I just wanna have a local coding workflow:  write code in atom--- see the live result on google chrome. 

But I failed to set it up like in the video.... 

 

Could you show me the step?? 

1: install this

2: open terminal insert this code 

3:...etc etc 

[Cellebyte]

So follow the Install.md Guide on this.

https://github.com/google/web-starter-kit/blob/master/docs/install.md

 

Install npm from here nodejs.org

and then follow these steps.

So first Download the thing.

Extract it where ever you want.

Then open a Terminal and type:

cd /where/you/store/the/damn/thing/web-starter-kit/

//Then install gulp

npm install --global gulp
npm install

//after that do this:

gulp serve

//then your instance must be active under localhost:3000

 

[Cellebyte]

Here is a simple tutorial running this thing in an Vagrant Box for Cross-Coding with others.

 

Github.com/Cellebyte/vagrant-web-starter-kit

[Cellebyte]

 

10 minutes ago, Cellebyte said:

Here is a simple tutorial running this thing in an Vagrant Box for Cross-Coding with others.

 

Github.com/Cellebyte/vagrant-web-starter-kit

 

2 hours ago, mrchow19910319 said:

I haven't purchase them yet... I am still learning HTML and CSS....

I think I did not make myself clear, I just wanna have a local coding workflow:  write code in atom--- see the live result on google chrome. 

But I failed to set it up like in the video.... 

 

Could you show me the step?? 

1: install this

2: open terminal insert this code 

3:...etc etc 

I think this Instruction is easier to just start.