React-redux-starter-kit: Configuration Example

[postalservice14]

I'm having trouble figuring out environment configuration. The README.md states you can use the ~/config/ files to implement configuration such as api endpoints, etc.

I'm trying to do that in one of my route's module files, but can't seem to get it to work.

I tried adding import config from '../../../../config'; to modules/zen.js but that generates an error.

Any help would be super appreciated.

[davezuko]

You can't import the config from your app, since it is not processed by webpack. It's meant more as _build_ configuration, though perhaps that distinction needs to be made more clear. You can, though, use it to to configure the webpack compiler to expose different globals, which in a way allow for application configuration:

// https://github.com/davezuko/react-redux-starter-kit/blob/master/config/environments.js
export default {
  development: (config) => ({
    globals: {
      ...config.globals,
      API_ENV: 'some-development-url',
    }
  }),
  production: (config) => ({
    globals: {
      ...config.globals,
      API_ENV: 'some-production-url',
    }
  })
}

// in your app:
fetch(`${API_ENV}/some-endpoint`)

If you want a config that you share _inside_ of your application, I suggest just creating it yourself (perhaps src/config.js), and you can export different things there based on the Node environment.

[postalservice14]

Thanks @davezuko that makes sense

[huangzhuolin]

I modify a little to avoid "unexpected token:" error

in environments.config.js

module.exports = {
  ...
  development: (config) => ({
    compiler_public_path: `http://${config.server_host}:${config.server_port}/`,
    globals: Object.assign({}, config.globals, {
      API_ENV: JSON.stringify('http://localhost:8000'),
    })
  }),
}

[turkus]

Guys, big thanks for that, but I experienced one issue. When using this notation and use build:prod I recieve:

SyntaxError: Unexpected token: punc ()) from Uglify

and it points to the first letter of global variable API_URL. I have it implemented in this way:

export default reduxApi({
  campaigns: {
    url: `${API_URL}/api/v1/whatever`,
    transformer (response) {
      if (!response) return {}
      return response.data
    }
  } 
}).use('fetch', adapterFetch(fetch)).use('options', {
  headers: getRequestHeaders()
})

If I remove global variable from url:

export default reduxApi({
  campaigns: {
    url: `/api/v1/whatever`,
    transformer (response) {
      if (!response) return {}
      return response.data
    }
  } 
}).use('fetch', adapterFetch(fetch)).use('options', {
  headers: getRequestHeaders()
})

then everything works fine. Any ideas? Why uglify throws that kind of error?