|
1 | | -# AngularFrontend |
| 1 | +# Angular Project Setup Guide |
2 | 2 |
|
3 | | -This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.2.1. |
| 3 | +This guide provides step-by-step instructions for setting up an Angular project from scratch on an Ubuntu machine. |
4 | 4 |
|
5 | | -## Development server |
| 5 | +## Step 1: Install Node.js and npm |
6 | 6 |
|
7 | | -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files. |
| 7 | +```bash |
| 8 | +sudo apt update |
| 9 | +sudo apt install nodejs npm |
| 10 | +``` |
| 11 | +## Step 2: Check Node.js and npm versions |
8 | 12 |
|
9 | | -## Code scaffolding |
| 13 | +```bash |
| 14 | +node -v |
| 15 | +npm -v |
| 16 | +``` |
| 17 | +## Step 3: Install Angular CLI globally |
| 18 | +```bash |
| 19 | +sudo npm install -g @angular/ [email protected] |
| 20 | +``` |
| 21 | +## Step 4: Verify Angular CLI installation |
| 22 | +```bash |
| 23 | +ng --version |
| 24 | +``` |
| 25 | +## Step 5: Install project dependencies (if needed) |
10 | 26 |
|
11 | | -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. |
| 27 | +```bash |
| 28 | +npm install |
| 29 | +ng build |
| 30 | +cd dist/angular-frontend |
| 31 | +ng serve --host 0.0.0.0 --port=80 |
| 32 | +``` |
| 33 | +## Step 5: Deploy the artifact |
| 34 | +Transfer the contents of the dist/ directory to your server or hosting provider to make your Angular application available to users. |
12 | 35 |
|
13 | | -## Build |
14 | 36 |
|
15 | | -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. |
| 37 | +# Angular Project Dockerization Guide |
16 | 38 |
|
17 | | -## Running unit tests |
| 39 | +This guide provides step-by-step instructions for Dockerizing an existing Angular project. Docker allows you to package your Angular application into a container, making it portable and easily deployable across different environments. |
18 | 40 |
|
19 | | -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). |
| 41 | +## Prerequisites |
20 | 42 |
|
21 | | -## Running end-to-end tests |
| 43 | +- Docker installed on your system. You can download and install Docker Desktop from [here](https://docs.docker.com/engine/install/). |
22 | 44 |
|
23 | | -Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities. |
| 45 | +## Dockerfile Setup |
24 | 46 |
|
25 | | -## Further help |
| 47 | +Create a `Dockerfile` in the root directory of your Angular project with the following content: |
| 48 | + |
| 49 | +```Dockerfile |
| 50 | +# Use official Node.js image as the base image |
| 51 | +FROM node:14-alpine as build |
| 52 | + |
| 53 | +# Set the working directory in the container |
| 54 | +WORKDIR /usr/src/app |
| 55 | + |
| 56 | +# Copy package.json and package-lock.json (if available) |
| 57 | +COPY package*.json ./ |
| 58 | + |
| 59 | +# Install project dependencies |
| 60 | +RUN npm install |
| 61 | + |
| 62 | +# Copy the rest of the application code |
| 63 | +COPY . . |
| 64 | + |
| 65 | +# Build the Angular application |
| 66 | +RUN npm run build |
| 67 | + |
| 68 | +# Use NGINX as the production server |
| 69 | +FROM nginx:alpine |
| 70 | + |
| 71 | +# Copy the built artifact from the previous stage to NGINX web server directory |
| 72 | +COPY --from=build /usr/src/app/dist/angular-frontend /usr/share/nginx/html |
| 73 | + |
| 74 | +# Expose port 80 to the outside world |
| 75 | +EXPOSE 80 |
| 76 | + |
| 77 | +# Start NGINX server when the container starts |
| 78 | +CMD ["nginx", "-g", "daemon off;"] |
26 | 79 |
|
27 | | -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page. |
|
0 commit comments