Skip to content

Nomads.solution is upcoming project for learner to learn new skill. Technical contribution to project. Writing blog and many other thing are under pipeline.S3 autodeployment link http://nomadsfrontendproduction.s3-website.ap-south-1.amazonaws.com/

License

Notifications You must be signed in to change notification settings

techy1999/BlogFrontend

Repository files navigation

✨Nomads.solutions ✨

React CI

About

nomads.solution is upcoming project for learner to learn new skill. Technical contribution to project. Writing blog and many other thing are under pipeline.

Features

Guest User

  • Home page
  • Blog
  • Login
  • Register

Logged User

  • Home Page
  • Blog
  • My blog
  • create blog
  • logout
  • profile

Tech

  • [Reactjs] -
  • [Redux] -
  • [MUI-Material] -
  • [MUI-Icons] -
  • [NodeJs] -
  • [HTML/CSS] -

Setup Locally

  • Clone the repository git clone <url>

  • Go inside the BlogFrontend Folder

  • install package npm i

  • create a file .env.local

  • Paste below code in .env.local

    REACT_APP_DEV_URL="http://localhost:8000/api"
    REACT_APP_PROD_URL="https://www.nomads.solutions/api"
    REACT_APP_ENVIRONMENT="production" #Change it to "development" for local development testing.
    
  • To start the project run command npm start or to start with backend also running on local use npm run dev

  • Try to access the website in browser http://localhost:3000/

How to contribute and guidelines

  • Clone the repository git clone <url>

  • Follow above steps ## Setup Locally to setup locally

  • Go to issue tab and start picking the new issue or discussion form to get the update

  • Pick an issue by putting the comment in the issue

  • Once picked create a new branch following

    • Steps to follow

      1. Create a branch from main
      2. Naming format
          For feature - feature/yourgithubuser/[yr-<year>]/issuenumber
          For bug - bug/yourgithubuser/[yr-<year>]/issuenumber
      
      
      1. checkout to that branch
      
          git checkout -b branch_name 
      
      
      1. start working on branch

      2. once done

            git add . # add all the stage
            git commit -m "<meaning commit message>"  #commit your changes with proper message
            git  push origin branch_name   #push your code
        
        
        • Check for formating of code run command npm run format
      3. now go to the UI ie. github.com and create a new pr

      4. you can follow some tutorial as well here

    note :- Always take pull from main , keep your code updated always !

Learning

Learning resource for new contributors

Plugin README
Reactjs [https://react.dev/learn]
Material UI [https://mui.com/material-ui/all-components/]
Image [https://undraw.co/illustrations]
Github [https://www.youtube.com/watch?v=RGOj5yH7evk&t=425s]

===================================

Note :- For learning purpose only.(For admin)

Phase 1.

How to Setup for deployment on S3

We are using s3 for deployment of our website

  • Create public bucket with public access , access policy is below

  • enable static hosting.

  • enable acl.

     {
         "Version": "2012-10-17",
         "Statement": [
             {
                 "Effect": "Allow",
                 "Principal": "*",
                 "Action": "*",
                 "Resource": "arn:aws:s3:::nomadsfrontendproduction/*"
             }
         ]
     }
    
    
  • create build and drag and drop

  • Automatically deployed.

In our case we have a CI/CD pipeline which runs whenever new code is merged in the main branch

How setup is done.

  1. create action runner in github

  2. create env file and name is similar in code below

    • create env in github go to setting > secrets and variables> Action > New repository secret

          REACT_APP_DEV_URL="http://localhost:8000/api"
          REACT_APP_PROD_URL="https://www.nomads.solutions/api"
          REACT_APP_ENVIRONMENT="production" #Change it to "development" .
      
      
    • create for aws named

          S3_BUCKET=xxxxxxx # get it from aws s3 bucket name
          AWS_SECRET_ACCESS_KEY=xxxxx  # Get from IAM user create security credentials
          AWS_SECRET_ACCESS_ID=xxxxx # Get from IAM user create security credentials
      
      
  3. Put below code


name: React CI

on:
  push:
    branches: [ "main" ]

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]
    
    steps:
      - uses: actions/checkout@v1
      - run: npm ci
      - run: npm install
      - run: |
          touch .env
          echo "${{secrets.NOMADS_FRONTEND_ENV}}" > .env
      - run: CI=false npm run build
      - uses: jakejarvis/s3-sync-action@master
        with:
          args: --acl public-read --follow-symlinks --delete
        env: 
          AWS_S3_BUCKET: ${{ secrets.S3_BUCKET }}
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          AWS_REGION: 'us-east-1'   # optional: defaults to us-east-1
          SOURCE_DIR: 'build'      # optional: defaults to entire repository


Phase 2.

Deployment using creating build deployed on aws using nginx and url to www.nomads.solutions

License

MIT

About

Nomads.solution is upcoming project for learner to learn new skill. Technical contribution to project. Writing blog and many other thing are under pipeline.S3 autodeployment link http://nomadsfrontendproduction.s3-website.ap-south-1.amazonaws.com/

https://www.nomads.solutions

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages