html-webpack-plugin VS create-react-app

now we have a dist directory. inside of dist we have main.js file, to execute the file in browser we need to add it as a script in a html file. Instead of doing it manually, we'll take the help of html-webpack-plugin.

Let’s say you use Webpack HtmlWebpackPlugin to produce a static HTML file from a template you have, but sometimes that’s not enough. This page that you’re producing is that main static page for your SPA (Single Page Application) and aside from the processed bundles, versioning etc. you would like it to have other runtime data that concerns your entire site, for instance some sort of a configuration (not secret, god forbids) that needs to be available for scripts on the client.

If you are using webpack you can use the meta option from the HtmlWebpackPlugin to add the social meta meta tags to your web page:

Injecting those script tags is normally done via https://github.com/jantimon/html-webpack-plugin

Look at the html-webpack-plugin. (https://github.com/jantimon/html-webpack-plugin#options) I think you need to manualy injects tags by setting inject to false and using htmlWebpackPlugin.files directly in your HTML template.

html-webpack-plugin - Generate HTML files from template

This is just a discourse based on "I need to churn out something, I need that fast and I didn't start in the web game when Backbone and E4X were a solid corporate choice". If you are not in a hurry, work in a solid team and have a good attention span, a lot of clickbait idiocy around JS may not happen.

I'm presenting you one of countless examples: a lot of coding bootcamps teach React, maybe with TS, maybe with JS.

Enter react-create-app.

https://github.com/facebook/create-react-app

The docs are a link, while the commands you paste are laid out at 9th row in the README. That will become a habit for a junior.

In this exercise, you will customize your own landing page using the beautiful Landy template. Landy template is built on top of Create React App.

Create React App

Create React App is the official React CLI tool for setting up a new React project. It's an excellent starting point for beginners as it abstracts away the configuration details, allowing you to focus on writing your application.

React App: npx create-react-app --template typescript

At the time(10/06/2024) of writing this article, CRA has been effectively in a semi-dead state for the past two years. It has not received any commits since last year nor has it received any important commits for the past two years in CRA commit history. Issues have been pilling and none of them are being addressed in CRA issues.

I have a silly react project that I’m working on that I made using create-react-app. By default, these kinds of projects build and run using react-scripts which uses webpack under the hood for building projects. Vite is generally known to be faster than Webpack ⚡ so I was curious about how to swap them.

What is CRA?

In this tutorial, I will walk you through building a quick static site by doing a static build using ReactJS & create-react-app, then show you how to deploy that static site on AWS using S3 buckets as well as how to cache it & add SSL certificates with CloudFront CDN & Certificate Manager.

You can learn more about Create-React-App on its documentation website.