benoit-bremaud / angular-social-network

Angular is better than Somfony

angular-social-network

Angular is better than Somfony

angular-social-network's Issues

Write unit tests for Angular components

Écrivez des tests unitaires pour les composants Angular.

Setup deployment scripts

Description : Create scripts for deploying the backend and frontend to hosting services.

Steps :

• Create a deployment script for the backend
• Create a deployment script for the frontend
• Test the deployment process

Prepare release branch

Prepare release branch

Description
Create a release branch to prepare for a new production release.

Steps

1. Checkout the development branch and pull the latest changes:

git checkout development
git pull origin development

2. Create a new release branch:

git checkout -b release/vX.X.X

3. Perform necessary tests and fixes on the release branch.
4. Push the release branch to the remote repository:

git push origin release/vX.X.X

5. Open pull requests to merge the release branch into production and development.

Criteria for Success
A new release branch is created and pushed to the remote repository.
Pull requests are opened for merging the release branch into production and development.

Deploy frontend to Netlify

Deploy frontend to Netlify

Description
Automate the deployment of the frontend to Netlify using GitHub Actions.

Steps

1. Set up a Netlify site.
2. Add Netlify access token to GitHub Secrets.
3. Add a deployment workflow (deploy-frontend.yml) to .github/workflows:

   name: Deploy Frontend
   
   on:
     push:
       branches:
         - main
   
   jobs:
     build:
       runs-on: ubuntu-latest
   
       steps:
       - name: Checkout code
         uses: actions/checkout@v2
   
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
           node-version: '14'
   
       - name: Install dependencies
         run: npm install
   
       - name: Build frontend
         run: npm run build
   
       - name: Deploy to Netlify
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         run: |
           npm install netlify-cli -g
           netlify deploy --prod --dir=dist --site=<your-netlify-site-id>
   

Criteria for Success

The frontend is automatically deployed to Netlify on every push to the main branch.

Setup branch protection for `main`

Setup branch protection for main

Description
Configure branch protection rules for the main branch to ensure stability and prevent accidental changes.

Steps

• 1. Go to the repository settings.
• 2. Click on "Branches" under "Code and automation".
• 3. Click "Add rule".
• 4. Set the branch name pattern to main.
• 5. Enable "Require a pull request before merging".

• - Enable "Require approvals" and set the number of approvals required.
• - Enable "Dismiss stale pull request approvals when new commits are pushed".

• 6. Enable "Require status checks to pass before merging" and add necessary checks.
• 7. Enable "Require branches to be up to date before merging".
• 8. Enable "Prevent force pushes".
• 9. Enable "Prevent deletion".
• 10. Click "Create" to apply the rule.

Criteria for Success

• The main branch has the protection rules enabled and configured as specified.

Create pull request template

Create pull request template

Description
Create a template for pull requests to ensure consistency and completeness in code reviews.

Steps

1. Create the directory .github/PULL_REQUEST_TEMPLATE/.
2. Add a template for pull requests (pull_request_template.md):

   **Description**
   
   Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
   
   Fixes # (issue)
   
   **Type of change**
   
   Please delete options that are not relevant.
   
   - [ ] Bug fix (non-breaking change which fixes an issue)
   - [ ] New feature (non-breaking change which adds functionality)
   - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
   - [ ] This change requires a documentation update
   
   **How Has This Been Tested?**
   
   Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration.
   
   - [ ] Test A
   - [ ] Test B
   
   **Checklist:**
   
   - [ ] My code follows the style guidelines of this project
   - [ ] I have performed a self-review of my own code
   - [ ] I have commented my code, particularly in hard-to-understand areas
   - [ ] I have made corresponding changes to the documentation
   - [ ] My changes generate no new warnings
   - [ ] I have added tests that prove my fix is effective or that my feature works
   - [ ] New and existing unit tests pass locally with my changes
   - [ ] Any dependent changes have been merged and published in downstream modules
   

Criteria for Success

The directory .github/PULL_REQUEST_TEMPLATE/ exists in the repository.
A template for pull requests is created and pushed to the repository.

Branch Naming Convention

ranch Naming Convention (Refer to BRANCH_NAMING_GUIDE.md):

Use meaningful branch names like feature/xyz, bugfix/abc, release/v1.0.0.
Example:
bash
Copy code
git checkout -b feature/setup-project-structure

Setup MongoDB database

Description : Set up a local MongoDB instance and create a database for the project.

Steps :

• Install MongoDB
• Create a database named angular-social-network
• Test the connection to the database

Create User model with Mongoose

Description : Define a User model using Mongoose with fields for username, email, and password.

Steps :

• Install Mongoose
• Create the User schema and model
• Add validation for required fields

Create issue templates

Create issue templates

Description
Create templates for reporting bugs and requesting features to ensure consistency and completeness in issue reporting.

Steps

1. Create the directory .github/ISSUE_TEMPLATE/.
2. Add a template for bug reports (bug_report.md):

   ---
   name: Bug report
   about: Create a report to help us improve
   title: "[BUG]"
   labels: bug
   assignees: ''
   
   ---
   
   **Describe the bug**
   A clear and concise description of what the bug is.
   
   **To Reproduce**
   Steps to reproduce the behavior:
   1. Go to '...'
   2. Click on '....'
   3. Scroll down to '....'
   4. See error
   
   **Expected behavior**
   A clear and concise description of what you expected to happen.
   
   **Screenshots**
   If applicable, add screenshots to help explain your problem.
   
   **Desktop (please complete the following information):**
   - OS: [e.g. iOS]
   - Browser [e.g. chrome, safari]
   - Version [e.g. 22]
   
   **Smartphone (please complete the following information):**
   - Device: [e.g. iPhone6]
   - OS: [e.g. iOS8.1]
   - Browser [e.g. stock browser, safari]
   - Version [e.g. 22]
   
   **Additional context**
   Add any other context about the problem here.
   

3. Add a template for feature requests (feature_request.md):

---

name: Feature request
about: Suggest an idea for this project
title: "[FEATURE]"
labels: enhancement
assignees: ''

---

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Criteria for Success

The directory .github/ISSUE_TEMPLATE/ exists in the repository.
Templates for bug reports and feature requests are created and pushed to the repository.

Implement user login form

Description : Create a login form for existing users.

Steps :

• Create a component for the login form
• Implement form validation
• Connect the form to the authentication service

Setup branch protection for `development`

Setup branch protection for development

Description
Configure branch protection rules for the development branch to ensure stability and prevent accidental changes.

Steps

• 1. Go to the repository settings.
• 2. Click on "Branches" under "Code and automation".
• 3. Click "Add rule".
• 4. Set the branch name pattern to development.
• 5. Enable "Require a pull request before merging".

• - Enable "Require approvals" and set the number of approvals required.
• - Enable "Dismiss stale pull request approvals when new commits are pushed".

• 6. Enable "Require status checks to pass before merging" and add necessary checks.
• 7. Enable "Require branches to be up to date before merging".
• 8. Enable "Prevent force pushes".
• 9. Enable "Prevent deletion".
• 10. Click "Create" to apply the rule.

Criteria for Success

• The development branch has the protection rules enabled and configured as specified.

Create hotfix branch

Create hotfix branch

Description
Create a hotfix branch to fix critical bugs in production.

Steps

1. Checkout the production branch and pull the latest changes:

git checkout production
git pull origin production

2. Create a new hotfix branch:

git checkout -b hotfix/bug-description

3. Fix the bug and commit changes:

git add .
git commit -m "Fix bug-description"

4. Push the hotfix branch to the remote repository:

git push origin hotfix/bug-description

5. Open pull requests to merge the hotfix branch into production and development.

Criteria for Success
A new hotfix branch is created and pushed to the remote repository.
Pull requests are opened for merging the hotfix branch into production and development.

Commit Message Guidelines

Commit Message Guidelines (Refer to COMMIT_NAMING_GUIDE.md):

Use clear and concise commit messages.
Example:

git add .
git commit -m "feat(structure): initial project setup with backend and frontend directories"

(01) Setup initial branches

Setup initial branches

Description
Create the initial branches for the project: main, development, and production.

Steps

1. Create the main branch:

git checkout -b main
git push origin main

2. Create the development branch:

git checkout -b development
git push origin development

3. Create the production branch:

git checkout -b production
git push origin production

Criteria for Success
The main, development, and production branches are created and pushed to the remote repository.

Document branch management procedures in README

Document branch management procedures in README

Description
Add detailed documentation for branch protection rules and workflow procedures in the README file.

Steps

• 1. Open the README.md file in your code editor.
• 2. Add a new section titled "Development Workflow".
• 3. Document the process for creating and working on feature branches.
• 4. Document the process for preparing and testing release branches.
• 5. Document the process for creating and applying hotfix branches.
• 6. Document the setup and usage of CI/CD with GitHub Actions.
• 7. Commit the changes with a descriptive commit message.
• 8. Push the changes to the repository.

Criteria for Success

• The README.md file contains a detailed section on branch management and workflow procedures.

Create authentication service in Angular

Description : Implement an authentication service to handle user registration and login.

Steps :

• Create the service file
• Implement methods for registering and logging in users
• Integrate JWT for authentication

Implement user registration form

Description : Create a registration form for new users.

Steps :

• Create a component for the registration form
• Implement form validation
• Connect the form to the authentication service

Setup `.env` for Environment Variables

Sure, let's create the issue for setting up the .env file. This issue will help us securely manage environment variables and sensitive information.

Issue: Setup .env for Environment Variables

Description

Set up environment variables using a .env file to securely manage sensitive information like JWT secrets, database connection strings, etc.

Steps

• 1. Create a new branch for the work.
• 2. Install the dotenv package.
• 3. Create a .env file.
• 4. Update the application to use environment variables.
• 5. Secure the .env file by adding it to .gitignore.
• 6. Commit changes following Angular commit conventions.
• 7. Push the branch, create a pull request, and merge.

Detailed Steps

1. Create a New Branch for the Issue

Create a new branch for this feature:

git checkout main
git checkout -b feature/setup-env

2. Install the dotenv Package

Install the dotenv package to manage environment variables:

cd backend
npm install dotenv

3. Create a .env File

Create a .env file in the root of your backend directory:

touch .env

Add your environment variables to the .env file. For example:

JWT_SECRET=your_jwt_secret
MONGODB_URI=mongodb://localhost:27017/angular-social-network

4. Update the Application to Use Environment Variables

Update your app.js and other relevant files to load environment variables using dotenv.

Update backend/app.js

import express from 'express';
import mongoose from 'mongoose';
import dotenv from 'dotenv';
import authRoutes from './routes/auth.js';
import authMiddleware from './middleware/authMiddleware.js';
import Post from './models/Post.js';

dotenv.config();

const app = express();
const port = 3000;

app.use(express.json());

// Connect to MongoDB
mongoose.connect(process.env.MONGODB_URI).then(() => {
  console.log('Connected to MongoDB');
}).catch(err => {
  console.error('Error connecting to MongoDB', err);
});

// Use authentication routes
app.use('/api/auth', authRoutes);

// Protected route example
app.post('/api/posts', authMiddleware, async (req, res) => {
  const { title, content, author } = req.body;
  try {
    const post = new Post({ title, content, author });
    await post.save();
    res.status(201).send(post);
  } catch (error) {
    res.status(400).send('Error creating post');
  }
});

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  console.log(`Server is running at http://localhost:${port}`);
});

Update auth.js to use the JWT secret from the environment variables:

Update backend/routes/auth.js

import express from 'express';
import bcrypt from 'bcrypt';
import jwt from 'jsonwebtoken';
import User from '../models/User.js';

const router = express.Router();

// Register route
router.post('/register', async (req, res) => {
  const { username, email, password } = req.body;
  try {
    const hashedPassword = await bcrypt.hash(password, 10);
    const user = new User({ username, email, password: hashedPassword });
    await user.save();
    res.status(201).send(user);
  } catch (error) {
    res.status(400).send('Error registering user');
  }
});

// Login route
router.post('/login', async (req, res) => {
  const { email, password } = req.body;
  try {
    const user = await User.findOne({ email });
    if (!user) {
      return res.status(404).send('User not found');
    }
    const isPasswordValid = await bcrypt.compare(password, user.password);
    if (!isPasswordValid) {
      return res.status(401).send('Invalid password');
    }
    const token = jwt.sign({ id: user._id }, process.env.JWT_SECRET, { expiresIn: '1h' });
    res.json({ token });
  } catch (error) {
    res.status(400).send('Error logging in');
  }
});

export default router;

5. Secure the .env File

Add the .env file to your .gitignore to prevent it from being committed to your repository:

echo ".env" >> .gitignore

6. Commit the Changes

Add the modified files and commit following Angular commit message conventions:

git add .
git commit -m "chore: setup environment variables using .env

- Install dotenv package
- Create .env file for environment variables
- Update application to use environment variables
- Secure .env file by adding it to .gitignore"

7. Push the Branch, Create a Pull Request, and Merge

1. Push the Changes to the New Branch

Push your changes to the remote repository:

git push -u origin feature/setup-env

2. Create a Pull Request on GitHub

• Go to your GitHub repository.
• Click on the "Pull requests" tab.
• Click the "New pull request" button.
• Select main as the base and feature/setup-env as the compare branch.
• Add an appropriate title and description for the pull request.
• Click "Create pull request".

Example Title and Description for the Pull Request:

Title: "chore: setup environment variables using .env"

Description:

### Description
- Install dotenv package
- Create .env file for environment variables
- Update application to use environment variables
- Secure .env file by adding it to .gitignore

### Checklist
- [x] Environment variables configured
- [x] Application updated to use environment variables
- [x] .env file secured in .gitignore

3. Review and Merge the Pull Request

• Review the changes in the pull request.
• If everything is correct, click "Merge pull request".
• Delete the feature/setup-env branch after merging.

4. Synchronize the main Branch

git checkout main
git pull origin main

Conclusion

You have now set up environment variables using a .env file to securely manage sensitive information like JWT secrets and database connection strings. You also created a pull request for this feature and followed an organized and collaborative workflow.

If you have any questions or need assistance with the next steps, feel free to let me know!

Setup CI/CD with GitHub Actions

Setup CI/CD with GitHub Actions

Description
Automate tests and integrations using GitHub Actions for continuous integration and continuous deployment (CI/CD).

Steps

• 1. Create a .github/workflows directory in the repository.

• 2. Add a YAML file for the CI workflow (ci.yml).

• 3. Configure the workflow to run tests and checks on every push and pull request:

  name: CI
  
  on: [push, pull_request]
  
  jobs:
    build:
      runs-on: ubuntu-latest
  
      steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

4. Commit and push the workflow file to the repository

Criteria for Success

• A CI/CD workflow is configured using GitHub Actions.
• Tests and checks are automatically run on every push and pull request.

Deploy backend to Heroku

Deploy backend to Heroku

Description
Automate the deployment of the backend to Heroku using GitHub Actions.

Steps

1. Set up a Heroku app.
2. Add Heroku API key to GitHub Secrets.
3. Add a deployment workflow (deploy-backend.yml) to .github/workflows:

   name: Deploy Backend
   
   on:
     push:
       branches:
         - main
   
   jobs:
     deploy:
       runs-on: ubuntu-latest
   
       steps:
       - name: Checkout code
         uses: actions/checkout@v2
   
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
           node-version: '14'
   
       - name: Install dependencies
         run: npm install
   
       - name: Deploy to Heroku
         env:
           HEROKU_API_KEY: ${{ secrets.HEROKU_API_KEY }}
         run: |
           git remote add heroku https://git.heroku.com/<your-heroku-app-name>.git
           git push heroku main
   

Criteria for Success

The backend is automatically deployed to Heroku on every push to the main branch.

Setup Node.js and Express.js environment

Description : Initialize a new Node.js project, install Express.js, and set up a basic Express server.

Steps :

• Initialize the project with npm init -y
• Install Express with npm install express
• Create app.js and set up a basic server

Criteria for Success : The server runs on http://localhost:5000 and displays "Hello World" when accessing the root route.

Create Post model with Mongoose

Description : Define a Post model using Mongoose with fields for author, content, and timestamps.

Steps :

• Create the Post schema and model
• Add validation for required fields
• Ensure references to the User model

Create feature branch

Create feature branch

Description
Create a new branch for developing a specific feature.

Steps

1. Checkout the development branch and pull the latest changes:

git checkout development
git pull origin development

2. Create a new feature branch:

git checkout -b feature/your-feature-name

3. Develop the feature and commit changes:

git add .
git commit -m "Add your-feature-name"

4. Push the feature branch to the remote repository:

git push origin feature/your-feature-name

5. Open a pull request to merge the feature branch into development

Criteria for Success

A new feature branch is created and pushed to the remote repository.
A pull request is opened for merging the feature branch into development.

Write unit tests for User model

Description : Write unit tests to ensure the User model behaves as expected.

Steps :

• Set up a testing framework (e.g., Jest)
• Write tests for each field in the User model
• Ensure all tests pass

Deploying the Backend on Plesk.

Step-by-Step Guide to Deploy Backend on Plesk
Prerequisites

• Ensure you have access to a Plesk account with appropriate permissions.
• Ensure Node.js is installed on your server through Plesk.

Deprecated packages used by bcrypt and jsonwebtoken dependencies

• Install bcrypt for password hashing and jsonwebtoken for JWT handling:

cd backend
npm install bcrypt jsonwebtoken

Originally posted by @benoit-bremaud in #5

backend git:(feature/auth-routes) npm install bcrypt jsonwebtoken
npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
npm warn deprecated [email protected]: This package is no longer supported.
npm warn deprecated [email protected]: This package is no longer supported.
npm warn deprecated [email protected]: This package is no longer supported.

added 69 packages, removed 17 packages, changed 3 packages, and audited 137 packages in 55s

The warnings you received are related to deprecated packages used by bcrypt and jsonwebtoken dependencies. These warnings are common and do not usually affect the functionality of your application immediately. However, it's always good to keep your dependencies up to date to avoid potential issues in the future.