section13 deploy

[SOunit]

refs

• project have to be root for deployment https://github.com/SOunit/the_mern_stack_heroku_react https://github.com/SOunit/the_mern_stack_heroku_node

deploy steps overview

• develop & test your code
• swap url and credentials to production setting(using environment variables)
• build & deploy
• test deployed app, monitor and adjust

environment variable

backend

• nodemon.json
• access data using process.env.KEY_NAME

frontend

• .env
• REACTAPP
• all credential file goes to client, web browser. no credential code should be inside the client.

mongo atlas setup

• create production cluster
• create production user
• limit IP address
• limit service

react lazy loading

• to minimize initial load content
• use lazy

  const Users = lazy(() => import("./user/pages/Users"));
  const NewPlace = lazy(() => import("./places/pages/NewPlace"));
  const UserPlaces = lazy(() => import("./places/pages/UserPlaces"));
  const UpdatePlace = lazy(() => import("./places/pages/UpdatePlace"));
  const Auth = lazy(() => import("./user/pages/Auth"));

• use suspense to render lazy component

      <main>
        <Suspense
          fallback={
            <div className="center">
              <LoadingSpinner />
            </div>
          }
        >
          {routes}
        </Suspense>
      </main>

main 2 approaches

deploy 2 separated apps

• 1 static hosting server for react deploy
• 1 node.js hosting server
• setup for cors header

Heroku deploy

• create a new app
• use heroku git
• login

  heroku login

• add env variable settings > config var

mongo atlas setup

• open ip to public because heroku has dynamic ip
• you can setup static ip address using package or paid plan
• if ip is public, still you need user name and password to login to mongo atlas

react

serve

check build file in local

npx serve

firebasetool

• install ( official doc command run into error when firebase init command run)

  npm install -g firebase-tools

ref

https://dashboard.heroku.com/apps/max-mern-9230930/deploy/heroku-git

[SOunit]

document done.