search

truffle-box / react-box

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

Need for ejecting create-react-app #23

Closed kevinhughes27 closed 5 years ago

kevinhughes27 commented 7 years ago

I tried using this box this past weekend at ETHWaterloo but ended up just cherry picking the code I needed instead. There were 2 mains reasons for this:

  1. We had already committed some contract code to a bare truffle init project and couldn't use the unbox command as a result
  2. After looking at the repo I wanted to avoid ejecting create-react-app

The solution we came up with was to create a new react app in a client directory inside the truffle app. This solves the issue of create-react-app and truffle both using a build directory in the same folder. We did run into an issue that create-react-app doesn't allow importing code from outside of its own src directory which we solved with a symlink.

Here is our project for reference: https://github.com/kevinhughes27/ticket-wicket src directory with symlink https://github.com/kevinhughes27/ticket-wicket/tree/master/client/src

Were there any other reasons for ejecting create-react-app? It will be easier to maintain the box if create-react-app doesn't need to be ejected.

adrianmcli commented 7 years ago

I tried to do the same, but for some reason am having trouble using truffle-contract to create a contract that connects to the network. The currentProvider we got from the web3 object was:

{ host: "http://localhost:8545", timeout: 0, connected: false }

As opposed to just:

{ host: "http://localhost:8545" }

More importantly, whenever I try to do anything with my contract object (created by truffle-contract), I get the error:

TypeError: this.provider.sendAsync is undefined

I was wondering how you were able to get around this. I can't for the life of me figure out what the ejected project is doing vs my fresh un-ejected one.

Also, I used the symlink method as well.

kevinhughes27 commented 7 years ago

Did you init web3? That is the other piece provided by this repo. This is how I did it: https://github.com/kevinhughes27/ticket-wicket/blob/master/client/src/components/App.js#L19 this is how it was done in this repo https://github.com/truffle-box/react-box/blob/master/src/App.js#L24 (pretty similar)

adrianmcli commented 7 years ago

Yeah I literally copy and pasted the exact same thing + the getWeb3.js from the utils folder. The Web3 object initializes correctly, I tested that out.

I also made sure to install Web3 and truffle-contract. Literally the only difference should be the fact that it's not an ejected project (or maybe I'm missing a dependency?). I'll make a repo and post it here ago tho, thanks for taking a quick look.

adrianmcli commented 7 years ago

@kevinhughes27

https://github.com/adrianmcli/truffle-react-no-eject

So you can actually clone this project, and run both the ejected app (i.e. original app) and a freshly made non-ejected CRA app.

Changes I made

Again, the only things I added to the fresh CRA project were:

MetaMask Works on Both

One thing I should note is that the non-ejected CRA app actually DOES work if you have MetaMask installed and running. But in the case you are developing on a browser with no MetaMask, it does not work while using the "local" web3.

Doesn't Work with Local web3

In other words, there are two modes of Web3 inside the getWeb3.js file:

The former works on both the ejected and non-ejected projects, while the latter does not (I encounter the aforementioned sendAsync is undefined error).

adrianmcli commented 7 years ago

I just realized the issue. I've been trying to use web3@ 1.0, but Truffle Box React actually uses web3@0.16.0.

kevinhughes27 commented 7 years ago

oh dang! I guess there are breaking changes. Is there any info in the web3 repo about the release? Maybe this project should be updated to use the newest version.

adrianmcli commented 7 years ago

The 1.0.0-beta versions of web3 are still severely lacking in documentation. But I am at least able to confirm that there is no real need for the current react-box project to be ejected.

gre commented 6 years ago

exactly my thought. this boilerplate should be reduced to the minimal create-react-app sandbox. (and without any extra unecessary things like CSS / fonts). I recommend people to start with create-react-app and just copy contracts, migrations yourself. I also find it better to use a custom contracts_build_directory because build is the folder convention for create-react-app already (in my custom version I've set it to src/truffle-build/ , this can be added to gitignore).

I'm not sure if I miss some reason of why this was ejected.

adrianmcli commented 6 years ago

@gre if you are not opposed to Next.js, I've created a Truffle Box to work around this: https://github.com/adrianmcli/truffle-next

gre commented 6 years ago

@adrianmcli ok interesting thanks! create-react-app will be ok for a minimal usage I have. https://github.com/gre/react-dapp-starter <- if anyone interested, here is a starter i've written, that basically do like this repository but without ejecting & with less boilerplate code.

also it allows you to set the value just so you can test things:

capture d ecran 2018-02-02 a 16 43 22
gre commented 6 years ago

ok so after investigating myself, I've reached two problems with dapp & create-react-app:

so TL;DR. is: keep using an ejected version

gre commented 6 years ago

ok, actually i have found a workaround for the first problem, just put the root of the truffle project under src/dapp. and it works.

adrianmcli commented 6 years ago

I still firmly believe that using Next.js with Truffle offers a better developer experience than using Create React App with Truffle. That being said, I am happy to create an actively maintained version of this repo that works well with CRA and keeps the frontend separate.

The issues with the build folder is non-existent for me, since I have a symlink creating process (built into my Truffle-Next truffle box). I highly recommend people try it out while I put together my (I think, better) version of a CRA Truffle box.

adrianmcli commented 6 years ago

@gre I've created a competing Truffle Box with Create-React-App here.

You can get it by running: truffle unbox adrianmcli/truffle-react, but do check out the README on the repo itself.

Here's why it's better and you should try it:

If you doubt my work and need some social proof, my other Truffle Box already has 57 stars and is officially listed.

gre commented 6 years ago

@adrianmcli ok nice! very cool! I'm going to delete my repository asap because no time to maintain it and yours will cover this usecase :) Your version with next also is very interesting.

just for a bit of context, my usecase extends and diverges a bit from this simple starter-kit with truffle. I'm writing a quick starter with a complete example on how to write dapps with the ledger device (also compatible with metamask). When I say it diverges quite a bit, it's mainly because it includes the workflow on "selecting a wallet" and "selecting an account" as well as some third party libraries (like web3-provider-engine). People are free to import part of it back into a truffle box bootstrap project, or even to bootstrap from scratch (and it's not too crazy to do with nowadays tools^^)

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.

stale[bot] commented 5 years ago

This issue has been closed, but can be re-opened if further comments indicate that the problem persists. Feel free to tag maintainers if no there is no reply to further comments.