Archives : May-2016

I’m trying to set up a reverse proxy in Apache to serve up a React/Redux/webpack bundle. I have an Express server file serving my static files and index.html as follows: const express = require(‘express’); const path = require(‘path’); const app = express(); const port = process.env.PORT || 3000; app.use(express.static(‘./dist’)); app.get(‘/’, (req, res) => { res.sendFile(path.join(__dirname, ..

Read more

Hard refreshes on my SPA React/Firebase application does not maintain auth state on immediate execution of a function. I have a workaround, but it’s sketchy. My react routes utilize the onEnter function to determine whether or not the user is authenticated or not. For instance <Route path=”/secure” component={Dashboard} onEnter={requireAuth}/> Furthermore, my requireAuth function looks like ..

Read more

I’m used to application layouts with multiple yield areas, i.e. for content area and for top bar title. I’d like to achieve something similar in React Router. For example: <Router> <Route path=”/” component = { AppLayout }> <Route path=”list” component = { ListView } topBarComponent = { ListTopBar }/> </Route> </Router> AppLayout: <div className=”appLayout box”> ..

Read more

I have two components. In first component I have one button. On click of button I want to navigate to another component or another page. here is my code http://codepen.io/naveennsit/pen/pymqPa?editors=1010 class App extends React.Component { handleClick(){ alert(‘—‘); } render() { return <button onClick={this.handleClick}>hello</button> } } class Second extends React.Component { render() { return <label>second component</label> ..

Read more

I use Webpack dev server and browserHistory in React Router to manipulate with urls by HTML5 History API. historyapifallback-option does not work in my webpack config file. After refreshing http://localhost:8080/users or http://localhost:8080/products I got 404. webpack.config.js var webpack = require(‘webpack’); var merge = require(‘webpack-merge’); const TARGET = process.env.npm_lifecycle_event; var common = { cache: true, debug: ..

Read more