Integrating with react-redux-firebase generator

[MincePie]

Prerequisites

Expected Behavior

I am trying to integrate this front end with https://github.com/prescottprue/generator-react-firebase which provides a ready to go back end using a basic material ui theme.

It's tricky. I'm not sure why the dependencies specified in this code dont mesh with those in the backend setup - but I can't get the code to start.

Current Behavior

Since adding the dependencies in this setup, the code now won't start (no other changes at all) and scss that was in the backend file is throwing an error that says: LoadingSpinner.js:4 Uncaught Error: Cannot find module "./LoadingSpinner.scss"

This and all the other scss files previously loaded just fine.

Do you have any experience integrating your front end with this backend?

Please help provide information about the failure if this is a bug. If it is not a bug, please remove the rest of this template.

Steps to Reproduce

Run the generator for the back end (using materialui), then try to integrate this front end.

Context

MAC os mojave

Failure Logs

LoadingSpinner.js:4 Uncaught Error: Cannot find module "./LoadingSpinner.scss"
at webpackMissingModule (LoadingSpinner.js:4)
at Object../src/components/LoadingSpinner/LoadingSpinner.js (LoadingSpinner.js:4)
at webpack_require (bootstrap 7d666f630f65eb690b4e:712)
at fn (bootstrap 7d666f630f65eb690b4e:117)
at Object../src/components/LoadingSpinner/index.js (index.js:1)
at webpack_require (bootstrap 7d666f630f65eb690b4e:712)
at fn (bootstrap 7d666f630f65eb690b4e:117)
at Object../src/utils/components.js (components.js:7)
at webpack_require (bootstrap 7d666f630f65eb690b4e:712)
at fn (bootstrap 7d666f630f65eb690b4e:117)

Thank you

[einazare]

Hello there @MincePie ,

I've tried starting to work with the given repo, but I think I am doing something wrong since I have some errors in the console.
Can you please give me some step by step guide on what have you done?
Did you install globally these packages?

npm install -g yo generator-react-firebase

I mean, a really thorough step by step would help me.

Best,
Manu

[MincePie]

Hi @einazare,

Yes - but before you get too much further into testing, there has been a big discussion on gitter today about the backend integration. It seems like there are several users who want to couple your front end with Scott's backend. We worked a few things out today. I'm just sitting down to test them now. Can you let me do that tonight and then I'll come back to you to help with getting you started with new insights tomorrow. One thing you need to know is that you need to be using node v 8 to work with the backend -so that might be what's causing you an issue at this point. I'll come back tomorrow with more details. Thanks again for looking at this. Mel

[einazare]

Hello again @MincePie ,

Yeah, that is fine with me.

Best,
Manu

[MincePie]

Hi @einazare

I've spent most of last night and today trying to figure out how to integrate this front end with the generated back end. It is a huge task. It would be great if Creative Tim could support the integration. I'm going to stop trying for now - it's too much time cost for me to get your design into the functional back end - but so valuable if it could happen. There has been lots of discussion over the past couple of days amongst others who are in the process of attempting to do the same thing -so I think there is a desire to see this happen.

If you want to have a look at what is happening, steps to setup the backend are:

1. Make sure you're on node v8
2. Follow the setup instructions on the generator page (link above) - all the default choices (material ui) should be accepted, with the only option to toggle being the tests option (default is off, but press the space bar to turn it on). My settings are firebase deployment with gitlab CI. To get Firebase credentials, you can just make a dummy project on firebase - or click through the config options in the generator without entering details and then you just wont connect to a db.
3. I had to install cross-env dependency after the generator finished running and then do an npm audit fix - (there are some breaking changes - which I think Scott is working on - but that won't affect your review).
4. You should then be able to run npm start to see the basic app.

The objective is to integrate your front end with that backend. Would be really wonderful if you were able to consider supporting that. I'll give this some more time later next week, but will use standard material styling until I get a clearer idea of how to approach this problem.

Thanks again for taking a look at this.

[einazare]

Hello again @MincePie ,

I will look into this next week.
I've already spoken to the board about this and see if we can figure out a solution.

Once again, thank you for your comments and your interest shown to our products.

Best,
Manu

[MincePie]

FYI @einazare - the point at which I gave up on trying to integrate the front end, was after moving all the assets and components over - the page just wont load. Chrome doesnt give any log reporting. Firefox gives the following:

rror: Script terminated by timeout at:
createElementWithValidation@http://10.0.0.2:3000/vendor.js:260358:21
render@http://10.0.0.2:3000/main.js:97141:25
finishClassComponent@http://10.0.0.2:3000/vendor.js:241830:22
updateClassComponent@http://10.0.0.2:3000/vendor.js:241793:10
beginWork@http://10.0.0.2:3000/vendor.js:242611:16
performUnitOfWork@http://10.0.0.2:3000/vendor.js:245349:12
workLoop@http://10.0.0.2:3000/vendor.js:245389:24
renderRoot@http://10.0.0.2:3000/vendor.js:245475:7
performWorkOnRoot@http://10.0.0.2:3000/vendor.js:246366:7
performWork@http://10.0.0.2:3000/vendor.js:246278:7
performSyncWork@http://10.0.0.2:3000/vendor.js:246252:3
requestWork@http://10.0.0.2:3000/vendor.js:246121:5
scheduleWork@http://10.0.0.2:3000/vendor.js:245930:5
scheduleRootUpdate@http://10.0.0.2:3000/vendor.js:246598:3
updateContainerAtExpirationTime@http://10.0.0.2:3000/vendor.js:246626:10
updateContainer@http://10.0.0.2:3000/vendor.js:246683:10
./node_modules/react-dom/cjs/react-dom.development.js/ReactRoot.prototype.render@http://10.0.0.2:3000/vendor.js:246945:3
legacyRenderSubtreeIntoContainer/<@http://10.0.0.2:3000/vendor.js:247085:9
unbatchedUpdates@http://10.0.0.2:3000/vendor.js:246481:10
legacyRenderSubtreeIntoContainer@http://10.0.0.2:3000/vendor.js:247081:5
render@http://10.0.0.2:3000/vendor.js:247142:12
render@http://10.0.0.2:3000/main.js:97857:3
render@http://10.0.0.2:3000/main.js:97873:9
./src/main.js/<@http://10.0.0.2:3000/main.js:97892:11
./src/main.js@http://10.0.0.2:3000/main.js:97812:29
webpack_require@http://10.0.0.2:3000/manifest.js:713:12
fn@http://10.0.0.2:3000/manifest.js:118:20
1@http://10.0.0.2:3000/main.js:99617:1
webpack_require@http://10.0.0.2:3000/manifest.js:713:12
webpackJsonpCallback@http://10.0.0.2:3000/manifest.js:26:23
@http://10.0.0.2:3000/main.js:1:1
react.development.js:1730:19
Source map error: Error: sourceMapURL could not be parsed
Resource URL: blob:http://localhost:3000/cad8ff5e-5c62-bf4c-b88c-befcb50ab926
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9zdHlsZXMvc3JjL3N0eWxlcy9jb3JlLnNjc3MiLCIvVXNlcnMvbWVsYW5pZW1hc2xlbS9jb2RlYm93bC9jZjE1MTExOC9zcmMvc3R5bGVzL3NyYy9zdHlsZXMvX3N0YW5kYXJkLWNsYXNzZXMuc2NzcyIsIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9zdHlsZXMvc3JjL3N0eWxlcy9fY29sb3JzLnNjc3MiLCIvVXNlcnMvbWVsYW5pZW1hc2xlbS9jb2RlYm93bC9jZjE1MTExOC9zcmMvc3R5bGVzL3NyYy9zdHlsZXMvX2RldmljZS1zaXplcy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGtFQ0NFLGFBQWEsQUFHYixvQkFBb0IsQUFDcEIsb0JBQXFCLENBQ3RCLEFETkQsaUNDU0UsMEJBQXNCLEFBQXRCLHFCQUFzQixDQUtyQixBRGRILG9CQ2FJLHNCQUFtQixBQUFuQixrQkFBbUIsQ0FDcEIsQURkSCwyQkNrQkUsdUJBQW1CLEFBQW5CLGtCQUFtQixDQUtsQixBRHZCSCxpQkNzQkkscUJBQXVCLEFBQXZCLHNCQUF1QixDQUN4QixBRHZCSCxLQVVJLHFCQUFzQixDQUN2QixBQVhILFVBZUksU0FBUyxBQUNULFVBQVUsQUFDVixZQUFZLEFBQ1oseUJFVGdCLEFGVWhCLHNFQUFrRixDQVFuRixBR1ZELDBCSGpCRixVQXFCTSxjQUFlLENBTWxCLENBQUEsQUd0QkQseUJITEYsVUF5Qk0sY0FBZSxDQUVsQixDQUFBLEFBM0JILEVBNkJJLDhCQUFnQyxDQUtqQyxBQWxDSCxVQStCTSxxQkFBcUIsQUFDckIsYUFBYyxDQUNmLEFBakNMLGlCQXNDSSxrQkFBbUIsQ0FDcEIsQUF2Q0gsY0F5Q0ksaUNBQW1DLENBQ3BDIiwiZmlsZSI6ImNvcmUuc2NzcyIsInNvdXJjZXNDb250ZW50IjpbIjpnbG9iYWwge1xuICBAaW1wb3J0ICdiYXNlJztcbiAgQGltcG9ydCAnZGV2aWNlLXNpemVzJztcbiAgQGltcG9ydCAnc3RhbmRhcmQtY2xhc3Nlcyc7XG4gIC8vIEBpbXBvcnQgJ35ub3JtYWxpemUuY3NzL25vcm1hbGl6ZSc7XG4gIEBpbXBvcnQgdXJsKGh0dHBzOi8vZm9udHMuZ29vZ2xlYXBpcy5jb20vY3NzP2ZhbWlseT1Sb2JvdG86MzAwLDQwMCwxMDAsNTAwLDkwMCk7XG5cbiAgLy8gU29tZSBiZXN0LXByYWN0aWNlIENTUyB0aGF0J3MgdXNlZnVsIGZvciBtb3N0IGFwcHNcbiAgLy8gSnVzdCByZW1vdmUgdGhlbSBpZiB0aGV5J3JlIG5vdCB3aGF0IHlvdSB3YW50XG4gIGh0bWwge1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gIH1cblxuICBodG1sLFxuICBib2R5IHtcbiAgICBtYXJnaW46IDA7XG4gICAgcGFkZGluZzogMDtcbiAgICBoZWlnaHQ6IDEwMCU7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogJGJhY2tncm91bmQ7XG4gICAgZm9udC1mYW1pbHk6ICdSb2JvdG8nLCAnT3BlbiBTYW5zJywgJ0hlbHZldGljYSBOZXVlJywgSGVsdmV0aWNhLCBBcmlhbCwgc2Fucy1zZXJpZjtcbiAgICBAaW5jbHVkZSBkZXNrdG9wIHtcbiAgICAgIGZvbnQtc2l6ZTogMTVweDtcbiAgICB9XG5cbiAgICBAaW5jbHVkZSBtb2JpbGUge1xuICAgICAgZm9udC1zaXplOiAxMnB4O1xuICAgIH1cbiAgfVxuICBhIHtcbiAgICB0ZXh0LWRlY29yYXRpb246IG5vbmUgIWltcG9ydGFudDtcbiAgICAmOnZpc2l0ZWQge1xuICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xuICAgICAgY29sb3I6IGluaGVyaXQ7XG4gICAgfVxuICB9XG4gICosXG4gICo6YmVmb3JlLFxuICAqOmFmdGVyIHtcbiAgICBib3gtc2l6aW5nOiBpbmhlcml0O1xuICB9XG4gIFt0eXBlPWJ1dHRvbl17XG4gICAgLXdlYmtpdC1hcHBlYXJhbmNlOiBub25lICFpbXBvcnRhbnQ7XG4gIH1cbn1cbiIsIi5mbGV4IHtcbiAgZGlzcGxheTogZmxleDsgICAgICAgICAgICAgLyogTkVXLCBTcGVjIC0gT3BlcmEgMTIuMSwgRmlyZWZveCAyMCsgKi9cbiAgZGlzcGxheTogLXdlYmtpdC1ib3g7ICAgICAgLyogT0xEIC0gaU9TIDYtLCBTYWZhcmkgMy4xLTYgKi9cbiAgZGlzcGxheTogLW1vei1ib3g7ICAgICAgICAgLyogT0xEIC0gRmlyZWZveCAxOS0gKGJ1Z2d5IGJ1dCBtb3N0bHkgd29ya3MpICovXG4gIGRpc3BsYXk6IC1tcy1mbGV4Ym94OyAgICAgIC8qIFRXRUVORVIgLSBJRSAxMCAqL1xuICBkaXNwbGF5OiAtd2Via2l0LWZsZXg7ICAgICAvKiBORVcgLSBDaHJvbWUgKi9cbn1cbi5mbGV4LWNvbHVtbiB7XG4gIEBleHRlbmQgLmZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICYtY2VudGVyIHtcbiAgICBAZXh0ZW5kIC5mbGV4O1xuICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgfVxufVxuLmZsZXgtcm93IHtcbiAgQGV4dGVuZCAuZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgJi1jZW50ZXIge1xuICAgIEBleHRlbmQgLmZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IHJvdztcbiAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgfVxufVxuIiwiJGJsdWU6IGJsdWU7XG4kZ3JheTogI0U2RTZFNjtcbiRsaWdodEdyYXk6ICNEOEQ4RDg7XG4kbWVkaXVtR3JheTogIzk3OTc5NztcbiRkYXJrR3JheTogIzYxNjE2MTtcbiRibGFja0dyYXk6ICMyNzI4MjI7XG4kcHJpbWFyeTogcmdiKDMzLDE1MCwyNDMpO1xuJHNlY29uZGFyeTogcmdiKDIwMCwyMzAsMjAxKTtcbiRtYXRlcmlhbEJsdWU6ICMwMGJjZDQ7XG4kYmFja2dyb3VuZDogI0YyRjJGMjtcbiR3aGl0ZTogI2ZmZmZmZjtcbiRuYXZiYXI6ICRtYXRlcmlhbEJsdWU7XG4kbmF2YmFyVGV4dDogJHdoaXRlO1xuJHN1Yk5hdmJhcjogJG1hdGVyaWFsQmx1ZTtcbiRlZGl0b3JCYWNrZ3JvdW5kOiAkYmxhY2tHcmF5O1xuJHN1Y2Nlc3M6ICNjOGU2Yzk7XG4kZXJyb3I6ICNmZmEzYTM7XG4kYWNjZW50Q29sb3I6ICMwM0E5RjQ7XG4kVGFiOiAjMzMzMzMzO1xuJGxpbmtCbHVlOiAjNDI3ZmVkO1xuIiwiJG1vYmlsZS13aWR0aDogNDI1cHg7XG4kdGFibGV0LXdpZHRoOiA3NjhweDtcbiRkZXNrdG9wLXdpZHRoOiAxMDI0cHg7XG5cbkBtaXhpbiBtb2JpbGUge1xuICBAbWVkaWEgKG1heC13aWR0aDogI3skdGFibGV0LXdpZHRoIC0gMXB4fSkge1xuICAgIEBjb250ZW50O1xuICB9XG59XG5cbkBtaXhpbiB0YWJsZXQge1xuICBAbWVkaWEgKG1pbi13aWR0aDogI3skdGFibGV0LXdpZHRofSkgYW5kIChtYXgtd2lkdGg6ICN7JGRlc2t0b3Atd2lkdGggLSAxcHh9KSB7XG4gICAgQGNvbnRlbnQ7XG4gIH1cbn1cblxuQG1peGluIGRlc2t0b3Age1xuICBAbWVkaWEgKG1pbi13aWR0aDogI3skZGVza3RvcC13aWR0aH0pIHtcbiAgICBAY29udGVudDtcbiAgfVxufVxuIl0sInNvdXJjZVJvb3QiOiIifQ==[Learn More]
Source map error: Error: sourceMapURL could not be parsed
Resource URL: blob:http://localhost:3000/d7db4829-2494-c348-abdf-9a9d8cd9d2df
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9jb21wb25lbnRzL0xvYWRpbmdTcGlubmVyL3NyYy9zdHlsZXMvX3N0YW5kYXJkLWNsYXNzZXMuc2NzcyIsIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9jb21wb25lbnRzL0xvYWRpbmdTcGlubmVyL3NyYy9jb21wb25lbnRzL0xvYWRpbmdTcGlubmVyL0xvYWRpbmdTcGlubmVyLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsK1BBQ0UsYUFBYSxBQUdiLG9CQUFvQixBQUNwQixvQkFBcUIsQ0FDdEIsQUFDRCxxQ0FFRSwwQkFBc0IsQUFBdEIscUJBQXNCLENBTXZCLEFBTEMsK0VBRUUsMEJBQXNCLEFBQXRCLHNCQUFzQixBQUN0QixzQkFBbUIsQUFBbkIsa0JBQW1CLENBQ3BCLEFBRUgsa0NBRUUsdUJBQW1CLEFBQW5CLGtCQUFtQixDQU1wQixBQUxDLDJFQUVFLHVCQUFtQixBQUFuQixtQkFBbUIsQUFDbkIscUJBQXVCLEFBQXZCLHNCQUF1QixDQUN4QixBQ3JCSCxtQ0FFRSxvQkFBMkIsQUFBM0IsMkJBQTJCLEFBQzNCLGlCQUFpQixBQUNqQixXQUFZLENBQ2IsQUFDRCxrQ0FFRSxzQkFBbUIsQUFBbkIsbUJBQW1CLEFBQ25CLFVBQVcsQ0FDWiIsImZpbGUiOiJMb2FkaW5nU3Bpbm5lci5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmZsZXgge1xuICBkaXNwbGF5OiBmbGV4OyAgICAgICAgICAgICAvKiBORVcsIFNwZWMgLSBPcGVyYSAxMi4xLCBGaXJlZm94IDIwKyAqL1xuICBkaXNwbGF5OiAtd2Via2l0LWJveDsgICAgICAvKiBPTEQgLSBpT1MgNi0sIFNhZmFyaSAzLjEtNiAqL1xuICBkaXNwbGF5OiAtbW96LWJveDsgICAgICAgICAvKiBPTEQgLSBGaXJlZm94IDE5LSAoYnVnZ3kgYnV0IG1vc3RseSB3b3JrcykgKi9cbiAgZGlzcGxheTogLW1zLWZsZXhib3g7ICAgICAgLyogVFdFRU5FUiAtIElFIDEwICovXG4gIGRpc3BsYXk6IC13ZWJraXQtZmxleDsgICAgIC8qIE5FVyAtIENocm9tZSAqL1xufVxuLmZsZXgtY29sdW1uIHtcbiAgQGV4dGVuZCAuZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgJi1jZW50ZXIge1xuICAgIEBleHRlbmQgLmZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB9XG59XG4uZmxleC1yb3cge1xuICBAZXh0ZW5kIC5mbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAmLWNlbnRlciB7XG4gICAgQGV4dGVuZCAuZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG59XG4iLCJAaW1wb3J0ICdiYXNlJztcblxuLmNvbnRhaW5lciB7XG4gIEBleHRlbmQgLmZsZXgtY29sdW1uLWNlbnRlcjtcbiAganVzdGlmeS1jb250ZW50OiBmbGV4LXN0YXJ0O1xuICBwYWRkaW5nLXRvcDogN3JlbTtcbiAgaGVpZ2h0OiAxMDAlO1xufVxuLnByb2dyZXNzIHtcbiAgQGV4dGVuZCAuZmxleC1yb3ctY2VudGVyO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBoZWlnaHQ6IDUwJTtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0=[Learn More]
Source map error: Error: sourceMapURL could not be parsed
Resource URL: blob:http://localhost:3000/7a582361-480a-254d-a4da-7ccd1eac34a6
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9sYXlvdXRzL0NvcmVMYXlvdXQvc3JjL3N0eWxlcy9fc3RhbmRhcmQtY2xhc3Nlcy5zY3NzIiwiL1VzZXJzL21lbGFuaWVtYXNsZW0vY29kZWJvd2wvY2YxNTExMTgvc3JjL2xheW91dHMvQ29yZUxheW91dC9zcmMvbGF5b3V0cy9Db3JlTGF5b3V0L0NvcmVMYXlvdXQuc2NzcyIsIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9sYXlvdXRzL0NvcmVMYXlvdXQvc3JjL3N0eWxlcy9fY29sb3JzLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsc0tBQ0UsYUFBYSxBQUdiLG9CQUFvQixBQUNwQixvQkFBcUIsQ0FDdEIsQUFJQyx5RUFEQSwwQkFBc0IsQUFBdEIscUJBQXNCLENBS3JCLEFBSkQsd0NBR0Usc0JBQW1CLEFBQW5CLGtCQUFtQixDQUNwQixBQUtELG1FQURBLHVCQUFtQixBQUFuQixrQkFBbUIsQ0FLbEIsQUFKRCxxQ0FHRSxxQkFBdUIsQUFBdkIsc0JBQXVCLENBQ3hCLEFDckJILCtCQUNFLFlBQVksQUFFWixrQkFBa0IsQUFDbEIsZ0NBQWlDLENBQ2xDLEFBRUQsOEJBQ0UseUJBQXlCLEFBQ3pCLGtCQUFrQixBQUNsQix3QkNIa0IsQ0RJbkIiLCJmaWxlIjoiQ29yZUxheW91dC5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmZsZXgge1xuICBkaXNwbGF5OiBmbGV4OyAgICAgICAgICAgICAvKiBORVcsIFNwZWMgLSBPcGVyYSAxMi4xLCBGaXJlZm94IDIwKyAqL1xuICBkaXNwbGF5OiAtd2Via2l0LWJveDsgICAgICAvKiBPTEQgLSBpT1MgNi0sIFNhZmFyaSAzLjEtNiAqL1xuICBkaXNwbGF5OiAtbW96LWJveDsgICAgICAgICAvKiBPTEQgLSBGaXJlZm94IDE5LSAoYnVnZ3kgYnV0IG1vc3RseSB3b3JrcykgKi9cbiAgZGlzcGxheTogLW1zLWZsZXhib3g7ICAgICAgLyogVFdFRU5FUiAtIElFIDEwICovXG4gIGRpc3BsYXk6IC13ZWJraXQtZmxleDsgICAgIC8qIE5FVyAtIENocm9tZSAqL1xufVxuLmZsZXgtY29sdW1uIHtcbiAgQGV4dGVuZCAuZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgJi1jZW50ZXIge1xuICAgIEBleHRlbmQgLmZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB9XG59XG4uZmxleC1yb3cge1xuICBAZXh0ZW5kIC5mbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAmLWNlbnRlciB7XG4gICAgQGV4dGVuZCAuZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG59XG4iLCJAaW1wb3J0ICdiYXNlJztcblxuLmNvbnRhaW5lciB7XG4gIGhlaWdodDogMTAwJTtcbiAgLyogbW9tZW50dW0gc2Nyb2xsaW5nICovXG4gIG92ZXJmbG93LXk6IHNjcm9sbDtcbiAgLXdlYmtpdC1vdmVyZmxvdy1zY3JvbGxpbmc6IHRvdWNoO1xufVxuXG4uY2hpbGRyZW4ge1xuICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDQ4cHgpO1xuICBvdmVyZmxvdy15OiBzY3JvbGw7XG4gIGJhY2tncm91bmQtY29sb3I6ICRiYWNrZ3JvdW5kO1xufVxuIiwiJGJsdWU6IGJsdWU7XG4kZ3JheTogI0U2RTZFNjtcbiRsaWdodEdyYXk6ICNEOEQ4RDg7XG4kbWVkaXVtR3JheTogIzk3OTc5NztcbiRkYXJrR3JheTogIzYxNjE2MTtcbiRibGFja0dyYXk6ICMyNzI4MjI7XG4kcHJpbWFyeTogcmdiKDMzLDE1MCwyNDMpO1xuJHNlY29uZGFyeTogcmdiKDIwMCwyMzAsMjAxKTtcbiRtYXRlcmlhbEJsdWU6ICMwMGJjZDQ7XG4kYmFja2dyb3VuZDogI0YyRjJGMjtcbiR3aGl0ZTogI2ZmZmZmZjtcbiRuYXZiYXI6ICRtYXRlcmlhbEJsdWU7XG4kbmF2YmFyVGV4dDogJHdoaXRlO1xuJHN1Yk5hdmJhcjogJG1hdGVyaWFsQmx1ZTtcbiRlZGl0b3JCYWNrZ3JvdW5kOiAkYmxhY2tHcmF5O1xuJHN1Y2Nlc3M6ICNjOGU2Yzk7XG4kZXJyb3I6ICNmZmEzYTM7XG4kYWNjZW50Q29sb3I6ICMwM0E5RjQ7XG4kVGFiOiAjMzMzMzMzO1xuJGxpbmtCbHVlOiAjNDI3ZmVkO1xuIl0sInNvdXJjZVJvb3QiOiIifQ==[Learn More]
Source map error: Error: sourceMapURL could not be parsed
Resource URL: blob:http://localhost:3000/6603a02d-eefa-7944-b609-b386c87ad1b3
Source Map URL: data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9yb3V0ZXMvSG9tZS9jb21wb25lbnRzL0hvbWVQYWdlL3NyYy9zdHlsZXMvX3N0YW5kYXJkLWNsYXNzZXMuc2NzcyIsIi9Vc2Vycy9tZWxhbmllbWFzbGVtL2NvZGVib3dsL2NmMTUxMTE4L3NyYy9yb3V0ZXMvSG9tZS9jb21wb25lbnRzL0hvbWVQYWdlL3NyYy9yb3V0ZXMvSG9tZS9jb21wb25lbnRzL0hvbWVQYWdlL0hvbWVQYWdlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsb05BQ0UsYUFBYSxBQUdiLG9CQUFvQixBQUNwQixvQkFBcUIsQ0FDdEIsQUFDRCwrQkFFRSwwQkFBc0IsQUFBdEIscUJBQXNCLENBTXZCLEFBTEMsOEZBRUUsMEJBQXNCLEFBQXRCLHNCQUFzQixBQUN0QixzQkFBbUIsQUFBbkIsa0JBQW1CLENBQ3BCLEFBS0QsK0RBREEsdUJBQW1CLEFBQW5CLGtCQUFtQixDQUtsQixBQUpELG1DQUdFLHFCQUF1QixBQUF2QixzQkFBdUIsQ0FDeEIsQUN0QkgsNkJBRUUsZ0JBQWlCLENBQ2xCLEFBRUQsMkJBRUUsaUJBQWlCLEFBQ2pCLGlCQUFrQixDQUNuQiIsImZpbGUiOiJIb21lUGFnZS5zY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmZsZXgge1xuICBkaXNwbGF5OiBmbGV4OyAgICAgICAgICAgICAvKiBORVcsIFNwZWMgLSBPcGVyYSAxMi4xLCBGaXJlZm94IDIwKyAqL1xuICBkaXNwbGF5OiAtd2Via2l0LWJveDsgICAgICAvKiBPTEQgLSBpT1MgNi0sIFNhZmFyaSAzLjEtNiAqL1xuICBkaXNwbGF5OiAtbW96LWJveDsgICAgICAgICAvKiBPTEQgLSBGaXJlZm94IDE5LSAoYnVnZ3kgYnV0IG1vc3RseSB3b3JrcykgKi9cbiAgZGlzcGxheTogLW1zLWZsZXhib3g7ICAgICAgLyogVFdFRU5FUiAtIElFIDEwICovXG4gIGRpc3BsYXk6IC13ZWJraXQtZmxleDsgICAgIC8qIE5FVyAtIENocm9tZSAqL1xufVxuLmZsZXgtY29sdW1uIHtcbiAgQGV4dGVuZCAuZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgJi1jZW50ZXIge1xuICAgIEBleHRlbmQgLmZsZXg7XG4gICAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICB9XG59XG4uZmxleC1yb3cge1xuICBAZXh0ZW5kIC5mbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAmLWNlbnRlciB7XG4gICAgQGV4dGVuZCAuZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xuICB9XG59XG4iLCJAaW1wb3J0ICdiYXNlJztcbi5jb250YWluZXIge1xuICBAZXh0ZW5kIC5mbGV4LWNvbHVtbi1jZW50ZXI7XG4gIHBhZGRpbmctdG9wOiA0cmVtO1xufVxuXG4uc2VjdGlvbiB7XG4gIEBleHRlbmQgLmZsZXgtY29sdW1uLWNlbnRlcjtcbiAgbWFyZ2luLWxlZnQ6IDFyZW07XG4gIG1hcmdpbi1yaWdodDogMXJlbTtcbn1cbiJdLCJzb3VyY2VSb290IjoiIn0=[Learn More]

[MarcosRibeiroJesus]

It's so easy with Angular... I spent my last 7h try to connect this with Firebase.
In fact you need to understand how the template works first and after that follow the workflow to conect with firebase without third party lib's. I gonna try it again tonight...

[einazare]

Hello there @MarcosRibeiroJesus ,

This is how I've used firebase with one of our free products: https://medium.freecodecamp.org/how-to-connect-a-react-design-system-with-firebase-and-redux-9646ca1c733f
I am guessing that the hardest part of integrating this products with firebase is the fact that we use the withStyles function and you also need the connect function. What if you used the compose function to compose the two?

Best,
Manu

[nwvaras]

you can use connect(func,func)(withStyles(style)(component))

[MarcosRibeiroJesus]

Hello there Manu,
I'll try it today and I come back here.
Thank's for quick response!
Cheers!

[MarcosRibeiroJesus]

Everything works fine with your tutorial, but when I try to generate a build production to deploy the project on Firebase Hosting even with npm run build or yarn build, it failed to compile.

With npm run build

With yarn build

[einazare]

Hello there @MarcosRibeiroJesus ,

That is an issue from our scss.
Please go inside src/assets/scss/core/icons/_icon.scss and change all $icon-size-xx to #{$icon-size-xx}.

Best,
Manu

[MarcosRibeiroJesus]

Hello there @MarcosRibeiroJesus ,

That is an issue from our scss.
Please go inside src/assets/scss/core/icons/_icon.scss and change all $icon-size-xx to #{$icon-size-xx}.

Best,
Manu

I follow this facebook/create-react-app#5712 and work's fine too.

Best,
Marcos Ribeiro.