nomads.solution is upcoming project for learner to learn new skill. Technical contribution to project. Writing blog and many other thing are under pipeline.
Guest User
- Home page
- Blog
- Login
- Register
Logged User
- Home Page
- Blog
- My blog
- create blog
- logout
- profile
- [Reactjs] -
- [Redux] -
- [MUI-Material] -
- [MUI-Icons] -
- [NodeJs] -
- [HTML/CSS] -
-
Clone the repository
git clone <url> -
Go inside the
BlogFrontendFolder -
install package
npm i -
create a file
.env.local -
Paste below code in
.env.localREACT_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 startor to start with backend also running on local usenpm run dev -
Try to access the website in browser
http://localhost:3000/
-
Clone the repository
git clone <url> -
Follow above steps
## Setup Locallyto 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
-
- Create a branch from main
- Naming format
For feature - feature/yourgithubuser/[yr-<year>]/issuenumber For bug - bug/yourgithubuser/[yr-<year>]/issuenumber- checkout to that branch
git checkout -b branch_name-
start working on branch
-
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
- Check for formating of code run command
-
now go to the UI ie. github.com and create a new pr
-
you can follow some tutorial as well here
note :- Always take pull from main , keep your code updated always !
-
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] |
===================================
Phase 1.
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.
How setup is done.
-
create action runner in github
-
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
-
-
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
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent