🌳 Canh

Frontend infrastructure

Sep 13, 20241 min read

Basic

Details

  1. CRA (Create React App), bootstrapping the project
  2. Deploying frontend project to one of:
    1. GitHub pages
    2. Heroku
    3. AWS
    4. Any other similar platform
  1. https://create-react-app.dev/docs/getting-started
  2. https://dev.to/ruppysuppy/create-react-app-from-scratch-like-a-pro-de0
  3. https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site
  4. https://medium.com/@siobhanpmahoney/deploying-a-react-frontend-rails-backend-project-to-heroku-4b2c4f6f630c

Intermediate

Details

  1. Frontend bundlers (webpack, parcel, rollup, etc)
  2. Basic of webpack or other builder
    1. What is webpack and how it works
    2. Webpack config
      1. loaders
        1. CSS, SCSS
        2. babel, typescript
        3. adding new loaders
      2. plugins
        1. Minifiers
        2. HTML plugin
        3. adding new plugins
  3. Frontend deployment
    1. Uploading assets, publicPath in webpack
    2. Minification, sourcemaps
    3. Using and deploying to CDN
  1. https://dev.to/underscorecode/javascript-bundlers-an-in-depth-comparative-is-webpack-still-the-best-bundler-in-2021-59jk
  2. https://webpack.js.org/concepts/
  3. https://webpack.js.org/guides/getting-started/
  4. https://webpack.js.org/concepts/loaders/
  5. https://webpack.js.org/concepts/plugins/
  6. https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment
  7. https://medium.com/wolox/deploying-frontend-apps-in-storage-services-8b5678261269
  8. https://en.wikipedia.org/wiki/Content_delivery_network

Graph View

Backlinks