git/ github/ by Nima Shokouhfar

1. others

1.1. styles

1.1.1. bad

1.1.1.1. Very bad

1.1.2. good

1.1.2.1. very good

1.1.3. not as good

1.1.4. not as bad

1.1.5. important

1.1.5.1. Very important

1.1.6. warning

1.1.7. link

1.2. AUTHOR

1.2.1. Nima Shokouhfar

1.2.1.1. Linkedin

1.2.1.1.1. Follow me on LinkedIn to stay updated on my latest professional insights and tech projects!

1.2.1.2. Youtube

1.2.1.2.1. code with nima

1.2.1.2.2. ideariver

1.2.1.3. Medium

1.2.1.3.1. ✍️ Follow me on Medium to read my latest articles on tech, coding, and innovation!

1.2.1.4. upwork

1.2.1.4.1. 💼 Hire me on Upwork for freelance projects. Let’s work together to bring your tech ideas to life!

1.2.1.5. Github

1.2.1.5.1. ⭐️ Give my projects a star on GitHub and explore my repositories to discover new tools and innovations!

1.2.1.5.2. 💖 Sponsor me on GitHub to support my open-source contributions and help me create even more useful projects!

1.2.1.6. main website: ideariver.ca

1.2.1.6.1. 🚀 Visit IdeaRiver.ca for all my latest projects, blogs, and ways to connect!

2. main

2.1. how to remove .env from github

2.1.1. add .env to .gitignore

2.1.1.1. git add --all

2.1.1.2. git commit -m "removed .env"

2.1.1.3. git push origin master:dev

2.1.2. git rm -r --cached .env

2.1.2.1. git add .

2.1.2.2. git commit -m 'remove the cach for .env'

2.1.2.3. git push origin master:dev

2.1.3. git filter-branch --index-filter "git rm -rf --cached --ignore-unmatch .env" HEAD

2.1.3.1. git push --force origin master:dev

2.2. 1st level topic

2.2.1. Next level topic

2.3. revert a git

2.3.1. git revert cab57eb466c7b0adbab0f5aff4ea789bf1366ee1

2.4. git status --ignored

2.4.1. files that are being ignored

2.5. init remote repo

2.5.1. Create a new repository by clicking on the "New" button or the "+" icon.

2.5.2. Give your repository a name, description (optional), and choose whether it should be public or private.

2.5.3. Do not initialize the repository with a README, .gitignore, or license (you'll add these later if needed).

2.5.4. follow the instruction

2.5.4.1. git remote add origin https://github.com/nima70/ideariver.infra.git

2.5.4.2. git push -u origin master

2.6. origin

2.6.1. git remote -v

2.6.2. git remote set-url origin <new-repository-url>

2.7. git reset --hard

2.7.1. does not remove untracked files

2.7.2. solution

2.7.2.1. git clean -f

2.7.2.1.1. git clean -n:

2.8. github pages.

2.8.1. react

2.8.1.1. official link

2.8.2. non worked to adjust the url the trick to set the homepage in package.json to ./

2.8.2.1. "homepage": "./",

2.8.2.2. this adjusts the url for the webpage

2.8.3. one repo multiple pages

2.8.3.1. 1. Use Subdirectories for Multiple Static Sites You can create multiple static sites in subdirectories within the gh-pages branch. This allows you to deploy multiple sites under the same repository using different paths for each.

2.8.3.1.1. Example folder structure: bash Copy code /site1 /site2 /site3 Build each static site and put the output in these folders. Update URLs: When referencing assets (like CSS, JS), ensure that they are referenced with the correct relative path since these sites will not be hosted at the root. Deploy to GitHub Pages: Ensure you're using the correct branch (gh-pages or any other set up for GitHub Pages) and push the changes. Access URLs: Your static sites will be available at: https://username.github.io/repo-name/site1/ https://username.github.io/repo-name/site2/ https://username.github.io/repo-name/site3/

2.8.4. fo assets you may need this

2.8.4.1. <img src={`${process.env.PUBLIC_URL}/Quin main picture.png`} alt="meeting" className="object-cover rounded-lg block m-0 max-h-[100rem] " style={{ marginTop: 0, marginBottom: 0 }} // Remove top margin to ensure no gaps />

2.8.5. build

2.8.5.1. "build": "react-scripts build && npm run copy-build", "copy-build": "cp -r ./build ./docs/site"

2.8.5.1.1. cp does not work in windows

2.8.6. react with environment varaibles

2.8.6.1. name: Deploy React App to GitHub Pages on: push: branches: - master # Trigger deployment on pushes to the master branch workflow_dispatch: # Allow manual runs with custom inputs inputs: publish_api_version: description: "REACT_APP_PUBLISH_API_VERSION to use" required: true default: "1" query_api_version: description: "REACT_APP_QUERY_API_VERSION to use" required: true default: "1" jobs: build-and-deploy: runs-on: ubuntu-latest steps: # Step 1: Checkout the code from the repository - name: Checkout code uses: actions/checkout@v3 # Step 2: Set up Node.js - name: Set up Node.js uses: actions/setup-node@v3 with: node-version: "18" # Step 3: Install dependencies - name: Install dependencies run: npm install # Step 4: Echo and Inject environment variables and build the React app - name: Echo Environment Variables and Build run: | echo "REACT_APP_PUBLISH_API_VERSION=${{ vars.REACT_APP_PUBLISH_API_VERSION }}" echo "REACT_APP_QUERY_API_VERSION=${{ vars.REACT_APP_QUERY_API_VERSION }}" echo "GITHUB_REPOSITORY=${{ github.repository }}" npm run build env: REACT_APP_PUBLISH_API_VERSION: ${{ vars.REACT_APP_PUBLISH_API_VERSION }} REACT_APP_QUERY_API_VERSION: ${{ vars.REACT_APP_QUERY_API_VERSION }} # Step 5: Deploy the already built app using JamesIves/github-pages-deploy-action - name: Deploy with gh-pages uses: JamesIves/github-pages-deploy-action@releases/v3 with: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} BRANCH: gh-pages # The branch you want to deploy to (gh-pages) FOLDER: build # Use the existing 'build' folder created in the previous step

2.8.6.1.1. publish_api_version: description: "REACT_APP_PUBLISH_API_VERSION to use" required: true default: "1" query_api_version: description: "REACT_APP_QUERY_API_VERSION to use" required: true default: "1"

2.8.6.1.2. # Step 4: Echo and Inject environment variables and build the React app - name: Echo Environment Variables and Build run: | echo "REACT_APP_PUBLISH_API_VERSION=${{ vars.REACT_APP_PUBLISH_API_VERSION }}" echo "REACT_APP_QUERY_API_VERSION=${{ vars.REACT_APP_QUERY_API_VERSION }}" echo "GITHUB_REPOSITORY=${{ github.repository }}" npm run build env: REACT_APP_PUBLISH_API_VERSION: ${{ vars.REACT_APP_PUBLISH_API_VERSION }} REACT_APP_QUERY_API_VERSION: ${{ vars.REACT_APP_QUERY_API_VERSION }} # Step 5: Deploy the already built app using JamesIves/github-pages-deploy-action - name: Deploy with gh-pages uses: JamesIves/github-pages-deploy-action@releases/v3 with: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} BRANCH: gh-pages # The branch you want to deploy to (gh-pages) FOLDER: build # Use the existing 'build' folder created in the previous step

2.9. git ignore

2.9.1. !

2.9.1.1. to white list a path

2.9.1.1.1. !docs/storybook/keycloak-resources/login/resources/resources-common/node_modules/

2.9.1.1.2. use ! at the begining

2.9.2. *

2.9.2.1. means everything

2.9.2.2. example

2.9.2.2.1. .env.*

2.9.2.3. to ignore everyhing in a subdirectory

2.9.3. if you put .gitignore file in a subdirectory you can manipulate that subdirectory

2.10. Managing Generated Code with Git Submodules or Git Subtree:

2.10.1. Option 1: Git Submodules

2.10.1.1. Description:

2.10.1.1.1. Git submodules allow you to include another Git repository as a subdirectory within your current repository. This is useful for sharing generated code between different projects (e.g., TypeScript and Python) without duplicating it.

2.10.1.2. Steps:

2.10.1.2.1. - Create a separate repository for your generated code (e.g., `ideariver.generated`).

2.10.1.2.2. - Add the generated code as a submodule in both your TypeScript and Python projects.

2.10.1.2.3. In TypeScript package (ideariver.core for npm):

2.10.1.2.4. - Update the submodule when generated code changes:

2.10.1.3. Auto generated filesFiles

2.10.1.3.1. .gitmodules

2.10.1.4. for CI/CD you should make sure that submodules are included. this is so important otherwise the build will fail

2.10.1.4.1. steps: - name: Checkout repository uses: actions/checkout@v2 with: submodules: true # Ensure submodules are checked out continue-on-error: false

2.10.1.5. git submodule update --remote --merge

2.10.1.6. to add submodule

2.10.1.6.1. git submodule add https://github.com/nima70/ideariver.schemas schemas

2.10.1.6.2. git submodule update --init --recursive

2.10.2. Option 2: Git Subtree

2.10.2.1. Description:

2.10.2.1.1. Git subtree allows you to merge code from another repository into a subdirectory of your current repository. It doesn’t require users to manage multiple Git repositories separately, making it easier to integrate and manage the shared code.

2.10.2.2. Steps:

2.10.2.2.1. - Add the subtree to your TypeScript and Python projects.

2.10.2.2.2. In TypeScript package (ideariver.core for npm):

2.10.2.2.3. In Python package (ideariver.core for PyPI):

2.10.2.2.4. - Pull updates from the subtree when generated code changes:

2.10.2.2.5. - Push changes to the subtree (if necessary):

2.10.3. Key Differences Between Submodules and Subtrees:

2.10.3.1. - **Submodules:**

2.10.3.1.1. - Keep the repositories separate.

2.10.3.1.2. - Manual updates are required to update submodule pointers.

2.10.3.1.3. - Best if you want to maintain an independent generated code repository.

2.10.3.2. - **Subtrees:**

2.10.3.2.1. - Merges code into the main repository without additional pointers.

2.10.3.2.2. - Easier to work with the generated code as part of the main repository.

2.10.3.2.3. - Can be more complex when pushing changes back to the original repository.

2.10.4. Which Option to Choose?

2.10.4.1. - **Submodules:** Choose this if you prefer keeping the generated code repository independent and are fine with manually updating the submodule pointer.

2.10.4.2. - **Subtrees:** Use this if you want to integrate the generated code into your main repository, with the flexibility to push changes back when needed.