weather_forecast_backend v0.0.0

WebTips Starter Repo 🌐💻

This will act as a starter repository for WebTips projects

🔗 Quicklinks

🔹How to use this template repository? \ 🔹How to create a starter repo? \ 🔹How to create a worflow that runs unit tests for your repo?

How to use this template repository? 🏁

👉 Step 1: Create a new repository and choose the webtips_starter_repo as the template repository. \ 👉 Step 2: Clone the created repository.\ 👉 Step 3: Initialize the repository as a node project using the command: npm init -y . \ 👉 Step 4: This starter repo assumes that unit tests are written and run using jest. So, install jest using the command npm i --save-dev jest.\ 👉 Step 5: Create all the unit tests inside the unit folder in the tests folder:

👉 Step 6: If your application does not have any jest tests, add this command to your package.json (for the workflow to pass when there are no tests):

👉 Step 7: This starter repo assumes that all the end-to-end tests are written using playwright. So, follow the below given steps to initialize the project as a playwright project: \         🛡️ Step 7.1: Run this command: npm init playwright@latest to initialize the project as a playwright project\         🛡️ Step 7.2: It will ask whether you want to continue with typescript or javascript. By default, it will take typescript. If your project uses JavaScript, give JavaScript option. \         🛡️ Step 7.3: The moment playwright is installed, it will also give some sample tests. It will ask where these tests should be. By default, all the tests will be in tests folder. Specify that the tests must be stored in a folder called acceptance inside the tests folder using this path: ./tests/acceptance/ \         🛡️ Step 7.4: When installing playwright, it will ask whether to create a GitHub Actions workflow. Give no for this option because the starter repo already has a workflow to run the playwright tests.

        🛡️ Step 7.5: After installing playwright, it will create a new folder called acceptance and add sample tests to it. So, delete the existing folder called acceptance inside the tests folder (that folder only exists in the template repo to show folder structure). Move the test inside the test-examples folder inside the acceptance folder and delete the folder called test-examples.

👉 Step 8: The code analyzer pipeline for this repo uses Prettier, EsLint, html-eslint plugin, eslint-plugin-jsdoc and Stylelint. In order to ensure that the pipeline doesn't fail, follow the below steps: \         🛡️ Step 8.1: Run the following commands to install them as dev dependencies:

        🛡️ Step 8.2: Configure the eslint config.js file by running the command:

        🛡️ Step 8.3: Give the following specifications:

        If your project has babel installed then you definitely need to choose the JavaScript Module option. If you are working on a project such as React, Vue, Angular e.t.c they all use babel so you need choose this option. The CommonJS option is meant for commonJS that has nothing to do with babel, maybe your nodejs project and any other javascript project.

        🛡️ Step 8.4: Add the following to the plugin section of the eslint.config.js file:

        🛡️ Step 8.5: Add the following to the extends section of the eslint.config.js file:

        🛡️ Step 8.6: Add the following to the override section of the eslint.config.js file:

        🛡️ Step 8.7: Add the following to the rules section of the eslint.config.js file:

        🛡️ Step 8.8: Add the following to the script section of package.json:

        \        

👉 Step 9: After the above steps are complete, push to the main branch.

📎 GitHooks:

Follow the steps in this file to set up githooks in your local repository: GitHooks \ Ensure that your branch names and commit messages follow this syntax: GuideLines

🔻 NOTE:

📌 For each assignment, create a new branch from the main branch. \ 📌 After you are done working on an assigment, merge to the main branch. \ 📌 When merging to the main branch, the code's unit tests and playwright tests will be run, the code will be analyzed for syntax errors and spacing using Prettier, ESLint, html-eslint plugin and stylelint. So, ensure that your code follows these standards for the workflows to pass. \ 📌 If any of the tests fail or there is any error in the code, the branch will not merge with the main branch and the workflow will fail. \ 📌 Create a new branch for each assignment.

🔻 CODE ANALYZER NOTES:

✔️ The HTML Linter used in the code analyzer pipeline here is the html-eslint plugin. There are other options that can be used such as htmlHint. \ ✔️ The coding standard specified in the pipeline for Es Linting is "Standard". There are other options such as Google and AirBnb. \ ✔️ The JS files variable and function names should follow Camel Casing for the pipeline to pass. The js files should also be properly documented through jsdocs comments.

🔌 RECOMMENDED VS CODE PLUGINS:

✨ Prettier (To format your code)\ 🅰️ CSS Alphabetize (To arrange properties in alphabetical order in CSS files)\ 📖 Document This (To generate documentation for JavaScript files)