search

truffle-box / react-box

Truffle, Webpack and React boilerplate.
https://truffle-box.github.io/
MIT License
736 stars 251 forks source link

Upgrade to web3 1.0 and ES6 #53

Closed fredfortier closed 5 years ago

fredfortier commented 6 years ago

I started a project with this scaffold. While it works well, an older version of web3 is injected in my unit test. Also, I cannot import ES6 modules in them.

I'd expect the unit tests to be structured more like this: http://truffleframework.com/docs/getting_started/solidity-tests

How would I attempt to upgrade my project? I tried upgraded to ES6 like this: https://ethereum.stackexchange.com/questions/21210/syntaxerror-unexpected-token-import-on-truffle-test. However, this seems to cause some conflict in the Dapp with React expecting a different Babel config.

FabiolaBusch commented 6 years ago

I am encountering the same issues when updating my project using ES6 with babel, as you mentioned.

adrianmcli commented 6 years ago

@fredfortier @FabiolaBusch

Check out my alternative truffle box: https://github.com/adrianmcli/truffle-react

I use Web3 v1.0, and I have also enabled ES6 modules for writing tests. It seems like this repo is no longer actively maintained, but I tend to keep my repos pretty fresh (I am also the author of Truffle-Next btw).

I also avoid having conflicting environments between Truffle's JS environment and the React app by completely separating the frontend code into a different folder. The React app resides in its own /client folder. Ideally, you'd use a monorepo-like approach but the current Truffle Unbox implementation would not allow for that. See this issue I made here: https://github.com/trufflesuite/truffle-box/issues/11

medoror commented 6 years ago

@adrianmcli I just wanted to say that your truffle box helped me out a lot. Great work

adrianmcli commented 6 years ago

@medoror thanks! always good to hear that I'm helping. The maintainers of this repo seem to have decided to move on from this Truffle Box. They're putting all their effort into Drizzle, but I'm not sure it's the right direction for our community.

fredfortier commented 6 years ago

@adrianmcli what's the difference between truffle-react and truffle-next? I see that you are maintaining both and that they perform the same function. Is truffle-react more ligthweight?

adrianmcli commented 6 years ago

@fredfortier

truffle-react uses Create React App for the frontend client. truffle-next uses Next.js for the frontend client instead. Both of them allow you to make React web apps with minimal configuration.

Whether or not one is more lightweight than the other depends on what you are trying to do. Create React App tries to do less for you out of the box, but the generated project often have more files than a Next.js app.

The reason I maintain both is because I use both in my daily life. Both are capable of very complex web apps, but depending on your goals, usually one can get the balling rolling faster than the other. I highly recommend you check out both projects (CRA and Next.js) as they are maintained by some of the best people in the Javascript community.

adrianmcli commented 6 years ago

An update for you all.

I have joined the Truffle team and I will be updating and maintaining the official Truffle boxes. Don't worry guys, it's coming soon!

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

adrianmcli commented 5 years ago

This should be fixed now!