Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    WebStorm - Setting Up Angular 2

    John LindquistJohn Lindquist

    WebStorm can easily help you set up a new Angular 2 project with never even touching a terminal. This lesson shows you all the neat GUI tricks you need to know to get up and running.

    webstormWebStorm
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    00:00 Head over to GitHub at angular/angular2-seed. Grab this link right here. I'll copy it to the clip board.

    00:07 When you open up WebStorm, you can go to check out version control, choose Git. Go ahead and paste the link in here. Name it whatever. Clone it. Then, choose to open the directory.

    00:20 Then, in this directory, right-click on the package.json. Say run npm install. This assumes you have node installed already. I'm not going to add any of these files to Git, so I'll click OK. The npm install might take a while. Just wait for it.

    00:36 Then, WebStorm will begin indexing everything over here. Wait for that to finish. Then, right-click on package.json again. Go to Show NPM Scripts. Double-click on Start.

    00:46 Then, it will start loading up for you. If you're going to use this, come in here and break it out into windowed mode. Drag the windows somewhere else like another monitor.

    00:56 We already started it up. Let's jump to it. Right-click in Jump to Source so we can see which port this is on. Looks like it's on port 8080. If I hop over into the browser and go to the local host 8080, you can see we have an Angular app up and running. If I go into source app, seed app, you can see it's loading this template here which is this one.

    01:18 I'll just change home to away. Hit Save. You can see it changed this to away. It automatically reloaded for me.

    01:26 The final couple note is, I click OK for this. I'll let editor config override WebStorm's style. Editor config is this file here which tries to format files consistently across editors. WebStorm supports these options.

    01:40 In TypeScript, it asks us if we want to compile TypeScript to JavaScript. We'll say, "No" because this task that's running in the background that we already started is compiling the TypeScript for us, so we don't need WebStorm to do that for us.

    Discuss

    Discuss