Skip to content

Cool ReactJS UI library application with Redux State managements with Json-Server fake apis and Heroku Cloud App Platform backend having CircleCI Deployments

License

Notifications You must be signed in to change notification settings

kambleaa007/AshITech

Repository files navigation

README Awesome Website shields.io कुछ भी पूछो! Github all releases

Warning As it is practice purposes {TypeScript is avoided for complexity}

ReactJS

Project about platform for it services and eating menu listings

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

✍️ What things you need to install the software and how to install them

node
Node

npm
NPM Version

heroku CLI, account and installed cli

windows cmd powershell, linux terminal, mac terminal Platforms

chrome or any browser with react redux DevTools addOns plugins Open Source NPM License

Installing

✍️ A step by step series of examples that tell you how to get a development env running

Say what the step will be

git clone
cd project
npm i or yarn install
npm start
npm run deploy
heroku login
visit http://localhost:4200/

Babel Webpack

  • I kept my project under create-react-app, so underhood alot things going on of babel transcompiler, webpack,
  • For that just do command EJECT, then, you will get babel, webpack stuff,
  • but its one way journey, you cant get back to create-react-app,
  • coming soon...

Running the tests

jest karma jasmin

Deployment

✍️ How to deploy this on a live system use github pages gh-pages npm run deploy circle CI pipelines

Built With

  • NodeJS - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
  • ReactJS - UI javascript library
  • Redux - A Predictable State Container for JS Apps
  • JSON Server - Get a full fake REST API with zero coding in less than 30 seconds (seriously)
  • Heroku - Cloud Application Platform

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us. stackoverflow

Versioning

We use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

See also the list of contributors who participated in this project.

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Acknowledgments

  • Hat tip to anyone whose code was used
  • Inspiration
  • etc

✏️

git clone https://github.com/kambleaa007/AshITech.git
npm i
node start
Just That Only

#This is Git Clone AshITech Repo

✏️ You might need GitCloneJsonServer Repo

NOW Backend is at json-server folder running of server is must

doTest>cd json-server
doTest\json-server>json-server --watch db.json -d 2000 -p 3001

Heroku learnings work

✏️

open git check for json-server-heroku
clone it
cd into it
change db.json
keep package.json
add assets folder
> heroku login
> heroku create jsonserverashitech
> git init
> heroku git:remote -a jsonserverashitech
> git add .
> git commit -am "make it better"
> git push heroku master

Heroku

✏️ After Heroku server code updation

> heroku login
> git pull
> git add .
> git commit -am "added"
> git push heroku master

if error > git pull heroku master
After modification in the code
you might wonder the gh pages
you just need to run command
npm run deply
package.json have its brach
and command exposed

Now use json server auth

✏️ new apis added are,

https://jsonserverashitech.herokuapp.com/login
https://jsonserverashitech.herokuapp.com/register
GET-
https://jsonserverashitech.herokuapp.com/users
POST-
https://jsonserverashitech.herokuapp.com/users
BODY- JSON
{
"email": "XYZ@XYZ.com",
"password": ""
}
> npm install -D json-server-auth
Create a db.json file with a users collection :
{
"users": []
}

then register users, try login, take access tokens, store as cookie or add header "Authorization =xuhnkmkl"

json-server db.json -m ./node_modules/json-server-auth ==>with json-server installed globally and json-server-auth installed locally

json-server-auth db.json ==>with json-server-auth installed globally

to run, if not installed -> npm install -g json-server now run, npx json-server --watch db.json

GitHub Pages gh-pages branch

✏️

1. need to add `homepage` in `package.json`
   e.g. "homepage": "link-to-your-repository"
   our case it is
   "homepage": "https://kambleaa007.github.io/AshITech"

2. need predeploy and deploy inside scripts of package.json

"predeploy": "yarn run build",
"deploy": "gh-pages -d build",

3. on terminal run
   npm run deploy
   yarn run deploy

this is gonna pushes your built file to `gh-pages` branch on your remote repo

CircleCI

✏️

create folder .circleci
add config.yml file
add content

version: 2
jobs:
build:
docker:

- image: circleci/ruby:2.4.1
  steps:
- checkout
- run: echo "A first hello"

Git Learnings

✏️

git clone
git add .
git add \*

git commit -m "MESSAGE_STRING_HERE"
git push

git pull

git checkout -b BRANCH_NAME
-- create and switch to branch
git checkout BRANCH_NAME
-- switch to branch

git status
git pull
git add .
git push --set-upstream origin BRANCH_NAME
-- Need, for first commit only
git push
-- Works, for next commits

git checkout master
-- switch back to master
git merge BRANCH_NAME
-- on master merge your branch now
-- now commits will be on master too

git branch -d BRANCH_NAME
-- delete branch locally only not on github

git push origin --delete BRANCH_NAME
-- delete branch on remote

This project was bootstrapped with Create React App.

Below you will find some information on how to perform common tasks.
You can find the most recent version of this guide here.