Lesson 200

Starting Your Project

This Lesson’s Focus

• How to create a new project locally
• Get hooked up to Github

Before class

1. Install node https://nodejs.org/en/
2. Install VSCode https://code.visualstudio.com/

At CoderGirl

1. VSCode Extensions
   1. TSLint
   2. Angular Language Service
   3. EditorConfig for VS Code
   4. Auto Rename Tag
2. npm install -g @angular/cli
3. ng -v to make sure the CLI is installed
4. ng new codergirl-app --prefix cg --routing
5. cd codergirl-app
6. npm start
7. Navigate to http://localhost:4200 in your browser
8. Create a new repo on GitHub and push project (it is already a git repo)
9. Deploy to Heroku

Notes

assets/

• Your static files

environments/

• Your environment configuration, only thing there is a flag for production mode. Open the console to see that it’s running in dev mode, make sure not to ship dev to production (on Heroku, check that it’s not there). Development mode give some extra functionality for checking for errors, and also includes sourcemaps.

index.html

• Notice that there aren’t any script tags in this file–the Angular build process will add the script tags for us.

main.ts

• This is where the application startup code goes. The code in this file is the same as in the StackBlitz apps, but leaves off the StackBlitz-specific lines

polyfill.ts

• You may need to uncomment some of the lines depending on what browsers and features you are using

styles.css

• Global CSS (works the same way you are used to). The CSS files linked to individual components are scoped to just that component, not all components

angular.json

• Configuration for the Angular CLI. You can leave it as is for now. Needed for having multiple angular projects in the same repo or configuring the build process.

package.json

• Deps, scripts, project stuff

README.md

• Useful stuff to go through when you create a project, but you would replace this later with your information about how to work on your project locally

Home