Skip to content

zedquach/react-deployment-code

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React App

Package.json

  • your entry point to any app
  • holds configuration, metadata (version, name, etc), dependencies and scripts

Dependencies

  • npm -> Node Package Manager
  • command line tool that installs, updates or uninstalls Node.js packages in your application
  • online repository for open-source Node.js packages
  • https://npmjs.com/
  • Install locally: npm install <package name>
  • Install globally: npm install -g <package name>
  • Install and Save to package.json: npm install <package name> --save
  • Uninstall npm uninstall <package name>

BrowsersList

  • defines what browsers our app can run on. That is, the build process makes sure the output artifact can run in the specified browsers
  • to check what each query means, run npx browserslist <query>

index.html

  • traditional html file
  • you can add dependencies here too (not recommended)
  • PUBLIC_URL -> use this instead of ./ to avoid problems

Building

  • simply run npm run build
  • yarn global add serve
  • serve -s build

Deployment

Github Actions

  • create your Github repo
  • add a new folder .github/workflows
  • copy the build-deploy.yml file in this project into your repo under .github/workflows/build-deploy.yml
  • in package.json, add a new key/value as: "homepage": "https://prof-tejera.github.io/$YOUR_REPO_NAME". Replace $YOUR_REPO_NAME with the name of your repo
  • commit your files (make sure package-lock.json is there)
  • If you don't have a gh-pages branch you will have to create one and push it to Github. You can find instructions on how to create a branch here. You don't commit anything else to gh-pages branch. It is just used by Github to deploy.

In Github

  • Go to Settings
  • Go to Pages
  • in Source, select gh-pages branch
  • Click Save

Once the build-deploy action finishes running, the app should be live at https://prof-tejera.github.io/<repo>

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 65.0%
  • HTML 22.7%
  • CSS 12.3%