The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Flux Architecture: Overview and Project Setup

Flux Architecture: Overview and Project Setup

6:56
In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.
Watch this lesson now
Avatar
egghead.io

In this lesson we'll look at an overview of how Flux works, setup our application structure and tools, and create our first component.

Avatar
n7best

How do you get emmet work inside the return of render function with jsx?

Avatar
David

Great series, what Sublime plugins are you using?

In reply to egghead.io
Avatar
Indrek

What CLI are you using?

In reply to egghead.io
Avatar
Joseph

SidebarEnhancements, Alignment, AutoFileName, Emmet, BracketHighlighter, HTML-CSS-JS Prettify, and of course my own set of React snippets: https://github.com/joemaddalone/ReactSublimeSnippets

In reply to David
Avatar
Indrek

How did you get your CLI look like that? I'm using the iTerm2 also but it doesn't look the same. The green arrow which shows $pwd at all time is really cool. Mind elaborating a little bit?

In reply to Joseph
Avatar
Indrek

Thanks. I downloaded the theme, but still there is no green arrow to indicate my current pwd. I tried googling it but no luck. What's it called so I can google it?

In reply to Joseph
Avatar
Arek Śliwa

When I hit 'npm start' I receive something like this ( this is only a part):

npm ERR! This is most likely a problem with the egg_flux package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server

I was googling and I found that everything I have to do is to change the port from 8080 (https://github.com/webpack/react-starter/issues/34), but I was trying to type in different ports in webpack.config.js and still receive this error.

Avatar
Arek Śliwa

Maybe this part of message will be more helpful:
/eggflux/nodemodules/webpack/lib/NormalModuleFactory.js:72
var elements = request.replace(/^-?!+/, "").replace(/!!+/g, "!").split("!");
^
TypeError: Cannot read property 'replace' of undefined

In reply to Arek Śliwa
Avatar
Arek Śliwa

sorry for these posts - in webpack.config.js I wrote 'input' instead 'entry'...

In reply to Arek Śliwa
Avatar
Joseph

It's not a webpack issue. As far as I can tell it's saying you don't have the start command in your package.json.

"scripts": {
    "start": "webpack-dev-server"
  },

https://github.com/joemaddalone/egghead-flux-architecture/blob/master/package.json

Avatar

Great series i just wrapped up everything! Love this subscription already!

I just have one question for the series, when i see your dev tools, i see that you have your js file source-mapped?

Because when i want to debug my files all i get is the bundle.js witch has been through the babel converter, its not unreadable but its really annoying to read insted of just my source file, how did you do this ?

i've tryed devTools: 'source-map' in the webpack Config it didn work.

Avatar
Joseph

Just add devtool: 'source-map', to the root of the exported object in webpack.config.js

In reply to
Avatar
jason

It is just me, or is this one of the best explanations of Flux? Nice job!

Avatar
Dmytro

I have some troubles with work environment when trying to run the created application. Here is the topic, I created, on stackoverflow: http://stackoverflow.com/questions/36986133/couldnt-find-preset-es2015-relative-to-directory/

Avatar
Lucas

Hello, im trying to start my flux app and always display this error: "you may need an appropriate loader to handle this file type."

Follow my code:
//main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from "./componet/app";
ReactDOM.render(,
document.getElementById('container');
);

//app.js

import React from 'react'

export default class App extends React.Component{

render(){
  return <h1>A Flux Application </h1>
}

}

//webpack.config.js

module.exports = {
entry:"./src/js/main.js",
output:{
path:"./dist",
filename:"bundle.js",
publicPath:"/"

},
devServer:{
inline:true,
contentBase:"./dist"
},
modules:{
loaders:[
{
test: /.jsx?$/,
exclude:/node_modules/,
loader:'babel',
query : {
presets:['es2015','react']
}
}
]
}
};

Could you give me any help? Thanks

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?