javier-100 / example-react

Mern Stack.

Description

• Learning concept ReactJS framework development by Facebook.

• Learning ecosystem for ReactJS, example : react-router-dom, redux, Chakra UI.

• Implement project example with CRA.

• Build project and implement with SPA or SSR.

• Deploy source to hosting.

Feature

• Authentication :

  • Sign in.
  • Sign up.
  • Auto remember login.
  • Forgot password.
  • Send email forgot password.
  • Verity OTP via email.
  • Update user information, change password.

• Loading all in.

• CRUD todo example.

• UI profile and more...etc.

• Build static SSR.

• Search friend <coming soon>

• Request add friend <coming soon>

• Chat realtime (chat one to one, group chat, ...) <coming soon>

• Invite group chat <coming soon>

• Tutorial detail deployment fullstack app <coming soon>.

Setup

We are using template Create React App.

Note :

• Node version have Node >= 10 on your local development machine. You have download Node JS or update with command : npm update.
• Using IDE Visual Studio Code or WebStorm All you need left is to know a little bit of Javascript .

Docs & Started

• Docs for concept React JS.
• What is JSX ?
• How rendering with React ?
• How to create Component React and Props ?
• React State ? LifeCycle ?
• How to handle event React JS ?
• Condition Rendering ?
• Lists and Keys?
• Difference between Class Component and Functional Components. ( Link docs | Link dev )
• State management with redux
• Middleware for client redux saga

Running the app

We are split two folder: client and server

Run only client

# development

$ npm run start | yarn start

# build mode

$ npm run build | yarn build

Run only server

# development

$ npm run start:dev | yarn start:dev

# production mode

$ npm run start:prod | yarn start:prod

Run SSR

Run script in root folder

cd {root project}.

- open .env file, set IS_SSR=true
 *IS_SSR enable public folder build from client*

# bash script

$ ./ssr.sh

Deployment

Deployment FE:

Vercel allows for automatic deployment on every branch push and merges onto the production branch.

• Login Vercel
• Click button new project => import repository from github.
• When choose repository, you will see form config, then change root-directory ( ./client )
• Set ENV in step Environment Variables ( copy and paste all env inside env file ), attention with REACT_APP_BASE_URL, it should be set server link build production.
• Wait vercel build and done.

Deployment BE

• Login Heroku
• On dashboard, create new app {name_repo}.
• Have two ways:

  • Heroku CLI:

    • install heroku cli

      npm install -g heroku
      

    • check version heroku

      heroku --version
      

    • login heroku

      heroku login
      

    • create a new Git repository

      cd my-project/
      git init
      heroku git:remote -a {name_repo}
      

    • deploy your application

      git add .
      git commit -am "make it better"
      git push heroku master
      

    • if existing Git repository

      heroku git:remote -a testing-be-server
      

  • Github connection:

    • Coming soon!

Stay in touch