5. Setup Coding Your Website From The Ground Up ‐ Angular Web App - ayyjayy2/laynsleaf GitHub Wiki
This page is under construction
Everything you need to set up an web application
Here, we will build an Angular Web Application- meaning we will be using the Angular framework to make it.
What is Angular?
What you need to install
- An IDE (Integrated Development Environment) - in this case, we'll use VS Code
- Node.js
- NPM
- Java?
Check versions of the installs and make sure they are setup correctly
Setup Application
- Open the Node.js Command Prompt and navigate into the general folder you want it to be stored.
- Create a new directory/folder : mkdir [folderName]
- Create a new project : ng new [projectName]
- Answer 'Y' for Angular Routing and choose your preferred stylesheet format.
- Enter the new project via command line and open in VSCode : code .
- Explore the files automatically setup in VSCode.
- Back in the terminal, navigate to the app folder : cd src/app
- In the app directory, create a new component called 'home' : ng g c home (long format is : ng generate component home) . This component will have its own files for: html, css (or whatever stylesheet format you chose), typescript, spec typescript, and it will update the app.module.ts file to have your new component.
- The files will be autopopulated, so let's start the server to launch it in the browser. Open a new Node.js command prompt window, navigate to your project directory, and enter the command : ng serve --open (ng serve starts the server while --open will open it in your browser for you)
- edit edit edit
- add routing
- add bootstrap : npm i bootstrap bootstrap-icons
Connect to GitHub
- Follow this guide (the video is more detailed) : https://jhapriti09.medium.com/a-developers-guide-creating-a-github-repository-and-pushing-angular-code-1b9941f785e4
- Download Git to install GitBash terminal (32gb is losing support, so download 64db) : https://git-scm.com/download/win
- Add Node Modules to gitignore if it asks
- In VSCode terminal, navigate to main project directory and type >git init (this installs git and creates git folders including gitignore where you specify what to ignore when pushing to github - like nodeModules)
- you can check >git status
- to add all the previously listed added folders to the commits, do >git add .
- go to github, create a repository for the project, click <> Code, copy the link
- back in terminal, type >git remote add origin [insert link]
- commit your changes > git commit -m "git commit message"
- push the code to github > git push
- it may give you a command to run if it's the first time > git push --set-upstream origin master (though i think this creates a new branch 'master'. I think we need to try 'main' instead since that's the default branch in github)
- verify code has been pushed to github
- once you have code in master, then you can create branches from it.