Flux Architecture: Overview and Project Setup

Joe Maddalone
InstructorJoe Maddalone

Share this video with your friends

Send Tweet

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

n7best
n7best
~ 6 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

Ctrl+e

Arek Śliwa
Arek Śliwa
~ 5 years ago

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.

Arek Śliwa
Arek Śliwa
~ 5 years ago

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

Arek Śliwa
Arek Śliwa
~ 5 years ago

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

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

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

~ 5 years ago

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.

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

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

jason
jason
~ 5 years ago

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

Dmytro Medvid
Dmytro Medvid
~ 5 years ago

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/

Lucas
Lucas
~ 5 years ago

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(<App/>, 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

Joe Maddalone
Joe Maddaloneinstructor
~ 5 years ago

Make sure you have babel-loader, babel-preset-es2015, and babel-preset-react installed.

Iván Navarro
Iván Navarro
~ 4 years ago

changes I had to apply in webpack.config.js: output:path has to be absolute path -> __dirname + './dist' loader: 'babel-loader' missing babel-core, npm install babel-core --save-dev

Sai Kota
Sai Kota
~ 4 years ago

Hi,

i am unable to clear cache of webpack server. i fixed a js error but for some reason webpack is not picking up the modified js file but always the old file.

i tried adding --hot to clear cache, still no avail. "scripts": { "start": "webpack-dev-server --hot" },

Also tried restarting browser, restarting machine, still no use.

am i missing anyting??

df462fb9-8347-4c02-92f9-85fd44e5c1e7@anonymous.zalando.com
df462fb9-8347-4c02-92f9-85fd44e5c1e7@anonymous.zalando.com
~ 3 years ago

Hi, I did the course and I enjoyed it a lot. I'm a newbie but I could understand Flux and do my first app with it. I have a problem though: my app only shows the title "Flux App". As well, when I download the repo from GitHub I only see this as well.

Could someone help me out? Thanks!