react-app-rewired VS truffle

Further information here: https://github.com/timarney/react-app-rewired

Ejecting a React app is a bad idea because our application will lose all the React configurations and will not benefit from the CRA updates. Some solutions for ejecting our application include using packages like react-app-rewired or rewire. You can also use CRACO to eject your React application, but it needs you to install additional plugins.

When created I remove react-script package and copies build dependencies, configuration files and scripts into the app directory. It is needed to modify webpack.config file. (Another solution is to use react-app-rewired

Heads up: CRA5 bumped their webpack dependency to a version that no longer supports node polyfills in browsers. This breaks the builds of nearly all Ethereum-related projects today. A common workaround that avoids ejecting is to hook into the CRA build process. We’re using react-app-rewired but you could simply stay at CRA4 until the community comes up with a better solution.

CRA is good to get something running quick (and it uses webpack underneat!). In the past I've tweaked the webpack config using things like https://github.com/timarney/react-app-rewired when needed, but for all my "serious" projects I ended up ejecting and learning webpack! For my next project I'll try to skip CRA altogether!

// Overrides create-react-app webpack configs without ejecting // https://github.com/timarney/react-app-rewired const { addBabelPlugins, override } = require("customize-cra"); module.exports = override( ...addBabelPlugins( "babel-plugin-myPlugin" /* Add plug-in names here (separate each value by a comma) */ ) );

If Create React App supported Yarn workspaces out-of-the-box, what we've done so far would have been enough to run the app... unfortunately, it doesn't. Luckily, we can use CRACO (or other tools such as customize-cra or react-app-rewired) to customize the Webpack configuration used by Create React App to resolve packages imported from other workspaces.

<--- JS stacktrace ---> FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory 1: 00007FF69616B9CF v8::internal::CodeObjectRegistry::~CodeObjectRegistry+112159 2: 00007FF6960FCA26 v8::internal::MicrotaskQueue::GetMicrotasksScopeDepth+65430 3: 00007FF6960FD90D node::OnFatalError+301 4: 00007FF696A91BAE v8::Isolate::ReportExternalAllocationLimitReached+94 5: 00007FF696A783AD v8::SharedArrayBuffer::Externalize+78 [1]: https://github.com/timarney/react-app-rewired

Enter react-app-rewired. What this package does is it allows you to hook into the Webpack config process so you can change settings, add loaders or plugins, and so on. It's like having all the pros of ejecting (mainly, access to the webpack.config.js) without actually ejecting.

Switch to craco from react-app-rewired for better CRA v4 support (breaking change!)

Truffle (13700 GitHub Stars) https://github.com/trufflesuite/truffle

Truffle

You’ve probably heard that Generative AI has demonstrated the potential to disrupt a huge number of industries and jobs — and web3 is no exception. But how well can ChatGPT create smart contracts? Can using ChatGPT to code smart contracts make you a 10x developer? In this article, we’ll try it out and see. We’ll walk through writing and deploying an Ethereum smart contract using MetaMask, Infura, and Truffle … and we will ask ChatGPT for instructions on how to do everything from the code to the deployment.

truffle v5.8.3 and v5.8.4 — update Ganache to the most recent version which supports Shanghai and small fixes

For example, I used the Truffle Suite to write, compile, and deploy my first smart contracts, which includes Ganache to create a local blockchain and Drizzle to create a front-end dapp interface.

truffle v5.8.0 - Truffle introduces the Truffle Dashboard Hardhat plugin, which allows developers to see decoded transaction information when using Truffle Dashboard with their Hardhat projects.

In this article, we’ll explore what makes Linea so exciting. Then, we’ll walk through a tutorial on how to build a dapp on the Linea testnet. Finally, we’ll create our own cryptocurrency on Linea using Solidity, MetaMask, and Truffle: all mature ecosystem tools that are used by blockchain developers to build dapps.

Truffle is a popular development and testing framework for dApps, both for first time and experienced Ethereum developers. As well as containing a web3.js library, Truffle is simple, user friendly and, with over 56K GitHub users, trusted. To install Truffle you need to have Node, NPM and Python. You can install Truffle via NPM with the command ‘npm install -g truffle.’

The inspiration for the article came from a project I had built a little over a month earlier, for which I wrote a different article. In this initial project, I was actually using a Hardhat local node for my smart contract development. I decided to switch to Truffle for the final article, because it had a more intuitive demo contract, and because the command line tool made it easier to create manual transactions.

Easy for devs — The zkEVM supports most popular tools out of the box. You can build, test, debug, and deploy your smart contracts with Hardhat, Infura, Truffle, etc. All the tools you use now, you can keep using. And there is already a bridge to move tokens onto and off the network.