iroy2000 / react-redux-boilerplate Goto Github PK

I can't have a new project running on this server (localhost 8080), even after deleting all boilerplate files.

What is happening is the HTML itself is being rendered, but it's loading it with the default css properties instead of the frameworks. I have tested with mdbreact and react-bootstrap. I'm 99% sure that it is something to do with the webpack settings, but I'm not knowledgeable enough to fix it myself. I've also combed through the github issues for style-loader, css-loader, postcss-loader, and postcss-preset-env but did not find anything matching the current issues I am having.

Testing I've done:

• Recloned the project, and added mdbreact
• Recloned the project, and added react-bootstrap
• Attempted alias changes with webpack.config.common.js's resolve

Hey guy,

i have following error when I run "npm run dev":

ments/Projekte/SOBR/react-boilerplate/webpack.config.babel.js:1 │┌─Operation────────────────────────────────────────────────────────────────────────────┐
│ (function (exports, require, module, __filename, __dirname) import SHOULD_BUILD from './bin/shouldBuild'; ││ │
│ ^^^^^^ ││ │
│ ││ │
│ SyntaxError: Unexpected token import ││ │
│ at createScript (vm.js:80:10) ││ │
│ at Object.runInThisContext (vm.js:139:10) │└──────────────────────────────────────────────────────────────────────────────────────┘
│ at Module._compile (module.js:616:28) │┌─Progress─────────────────────────────────────────────────────────────────────────────┐
│ at loader (/Users/tobias/Documents/Projekte/SOBR/react-boilerplate/node_modules/babel-register/lib/node.js:144:5) ││ │
│ at Object.require.extensions.(anonymous function) [as .js] (/Users/tobias/Documents/Projekte/SOBR/react-boilerplate/node_modules/babel-register/lib/node.js:154:7) ││ │
│ at Module.load (module.js:565:32) ││ │
│ at tryModuleLoad (module.js:505:12) ││ │
│ at Function.Module._load (module.js:497:3)

Have you an idea who to fix it?

Hi!
node v6.8.1
npm v4.0.0
system: MacOs El Capitan

What i only did:

• unpacked your project
• run: npm install
• run: npm run dev

Did I make somewhere mistake or did not install something?
Your project looks great

> [email protected] test /Users/rafalschmidt/Downloads/react-redux-boilerplate-master
> jest --verbose

● The `unmockedModulePathPatterns` setting is defined but automocking is disabled in Jest. Please either remove `unmockedModulePathPatterns` from your configuration or expl
icitly set `"automock": true` in your configuration if you wish to use automocking.

  Jest 15 changed the default configuration for tests and makes Jest easier to
  use and less confusing for beginners. All previous defaults can be restored
  if your project depends on it. A comprehensive explanation of the breaking
  changes and an upgrade guide can be found in the release blog post linked
  below.

  Jest Issue Tracker: https://github.com/facebook/jest/issues
  Configuration Documentation: https://facebook.github.io/jest/docs/configuration.html
  Release Blog Post: https://facebook.github.io/jest/blog/2016/09/01/jest-15.html


Error: The settings `testDirectoryName` and `testFileExtensions` were removed from Jest. Instead, use `testRegex` like this:
    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(js|jsx|json)$"

  Jest 15 changed the default configuration for tests and makes Jest easier to
  use and less confusing for beginners. All previous defaults can be restored
  if your project depends on it. A comprehensive explanation of the breaking
  changes and an upgrade guide can be found in the release blog post linked
  below.

  Jest Issue Tracker: https://github.com/facebook/jest/issues
  Configuration Documentation: https://facebook.github.io/jest/docs/configuration.html
  Release Blog Post: https://facebook.github.io/jest/blog/2016/09/01/jest-15.html

    at throwConfigurationError (/Users/rafalschmidt/Downloads/react-redux-boilerplate-master/node_modules/jest-config/build/normalize.js:36:9)
    at normalize (/Users/rafalschmidt/Downloads/react-redux-boilerplate-master/node_modules/jest-config/build/normalize.js:226:11)
    at promisify.then (/Users/rafalschmidt/Downloads/react-redux-boilerplate-master/node_modules/jest-config/build/loadFromPackage.js:24:12)

npm ERR! Darwin 15.6.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "test"
npm ERR! node v6.8.1
npm ERR! npm  v4.0.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] test: `jest --verbose`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script 'jest --verbose'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the retro-community package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     jest --verbose
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs retro-community
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls retro-community
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/rafalschmidt/Downloads/react-redux-boilerplate-master/npm-debug.log

@iroy2000 I ran in to an issue trying to deploy to S3, where is wasn't clear to me from the documentation how to enable the use of the .env file for S3 deployment. in looking at the project history, it seems #46 is related to this.

There's a pattern in deployment workflows that require AWS credentials where they will look for environment variables first, then fall back to an AWS credentials file if those variables are not set. I can't speak for other developers, but I use Python Boto in my daily work and for this I already have a credentials file in my environment. Most people using the AWS CLI already have this setup.

It is possible to set our credentials like so:

s3Options: {
  credentials: new AWS.SharedIniFileCredentials({profile: process.env.AWS_PROFILE})
},

I would propose a few things:

1. webpack.config.common.js be changed so that .env is loaded there. This was mentioned in #46. This makes the values set in .env available for all builds, and we could make this safe so that the build does not break if the file is not there.
2. S3 deployments could be conditional on either config.get('s3.s3Deploy') === 'true' or an environment variable, EG S3_DEPLOY=true.
3. The .env file can pick up the user's creds from the credentials file as mentioned above. The file need only contain three values, for example:

S3_DEPLOY=true
AWS_PROFILE=default # or whatever profile the user wishes from their ~/.aws/credentials file
AWS_BUCKET=bucketname

4. Values in .env, if present, would override those set in the credentials profile for users' credentials. This way, someone could still choose to use .env without a credentials file if they chose to do so.
5. The docs would be changed to reflect the above.

If you are amenable to these changes or some variation of them let's figure it out and I will create a PR. I already have this setup working locally, so it shouldn't be a lot of work for me.

Thanks!

Hi there, excellent starter pack you got there!

Only thing missing seems to be internalization out of the box,
I've settled with react-intl (although alibaba/react-intl-universal looks cool too), and was wondering if it would make sense to add support for it in the starter

Default instance, cloned about 80 seconds ago. Ran an npm i, then ran the dev. When I try to start it I get the following error:

Running node v10.9.0, npm v6.3.0 on Windows 10.

is there is any way to convert this project to scss

Currently, in webpack.config.common.js, dotenv only loads if running npm run dev.

Shouldn't it be just the opposite? Currently, AWS S3 secrets added to the .env file will never be loaded for release with webpack-s3-plugin in webpack.config.prod.js.

I look around the project but can not get it out

This has served me well as a starter package, so thank you … The problem that I’m having, though, is that if I install a React package that has a class that uses static properties, the compiler chokes (“Unexpected token”). I can use static properties in my own JSX classes, though.

I’m hoping to use the react-hopscotch package but its classes define static propTypes, etc. So I can’t!

I’ve looked into this a bit today but am not by any means a pro when it comes to the complexities of configuration, especially when there are interactions at various levels.

Help on this would be much appreciated!

The attached patch fixes the redux devtools warning:
zalmoxisus/redux-devtools-extension#220

fix_redux_devtools_deprecation.patch.txt

Do you have a remedy for this issue, or does this build only work for Mac?

yarn run v1.15.2
$ cross-env NODE_ENV=development DASHBOARD_PORT=9901 webpack-dashboard -p 9901 -c red -t dashboard -- node bin/commands.js dev
'cross-env' is not recognized as an internal or external command,
operable program or batch file.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Hi, I want to remove the hash from browser. So I have used BrowserRouter. Here are the changes I have made :-

src/js/Root.jsx
// import { HashRouter as Router } from 'react-router-dom';
import { BrowserRouter as Router } from 'react-router-dom';

src/js/router.jsx
// import createHistory from 'history/createHashHistory';
import createHistory from 'history/createBrowserHistory';

But it is showing page not found. Could you please help me on this.

Is there any reason why the non-production builds do not use cache loading? I imagine it would make the builds faster

I got the following error while trying to do a basic install:

Bryans-MacBook-Pro:Documents bryan$ git clone https://github.com/iroy2000/react-redux-boilerplate.git
Cloning into 'react-redux-boilerplate'...
remote: Counting objects: 873, done.
remote: Total 873 (delta 0), reused 0 (delta 0), pack-reused 873
Receiving objects: 100% (873/873), 556.38 KiB | 1.52 MiB/s, done.
Resolving deltas: 100% (420/420), done.
Bryans-MacBook-Pro:Documents bryan$ cd react-redux-boilerplate
Bryans-MacBook-Pro:react-redux-boilerplate bryan$ npm install
npm WARN deprecated [email protected]: 'postcss-cssnext' has been deprecated in favor of 'postcss-preset-env'. Read more at https://moox.io/blog/deprecating-cssnext/
npm WARN deprecated [email protected]: 1.2.0 should have been a major version bump
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm WARN deprecated [email protected]: stop using this version
npm WARN deprecated [email protected]: Package no longer supported. Contact [email protected] for more info.
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm ERR! Unexpected end of JSON input while parsing near '...sign":"^4.1.0","promi'

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/bryan/.npm/_logs/2018-06-16T18_53_57_842Z-debug.log
Bryans-MacBook-Pro:react-redux-boilerplate bryan$ 

Here is a link to my debug.log: https://pastebin.com/raw/h4qHUJn5

Hi I have started my first project with this structure, I am trying to call a method from Component and want the promise return there. As per the structure I am able to call an API and getting the result in a variable. All I want to return the promise. here is my sample code:-

a. On componentDidMount I have called a method of Mudules to create an Action.
// On view
componentDidMount() {
this.props.getCampaignTopics(1);
}

//On Modules
export const getCampaignTopics = createAction(GET_EXAMPLES, (id : string) => ({id}));

b. On saga when action has been fired, I am calling the API endpoint to get the data
// On Saga
export function* getCampaignTopics(actions) {
let id=0;
if(actions.payload.id)
{
id= actions.payload.id;
}
const responsetype = yield call(() => fetch(__CONFIG__.api_url+'example/' + id,{method:'GET',data:{}}).then(response => response.json()))

yield put(addcampaignActions.setCampaignTopics(responsetype.data));
}

function* watchGetHome() {
yield takeLatest(addcampaignConstants.GET_EXAMPLES, getCampaignTopics);
}

c. After Getting the data I am calling another method of Modules to set data
export const setCampaignTopics = createAction(SET_EXAMPLES, (topics : any) => ({topics}));

export const reducers = {
[GET_EXAMPLES]: (state, { payload }) =>
state.merge({
...payload,
}),
[SET_EXAMPLES]: (state, { payload }) =>
state.merge({
...payload,
}),
}

d. In View I am using selector to separate the indexes
// Selector
const exampleSelector = state => state.addcampaign;

const topicSelector = createSelector(
exampleSelector,
payload => payload.get('topics')
);

export const exampleSelector = state => ({
topics: topicSelector(state)
`});``

e. In component I am getting the value on props
// render on Component const { addcampaign } = this.props; topics = addcampaign.topics.toJS().children;

Please tell me the right process to call an API and get result. Can anyone please tell me how can I get the result on promise. Here is how I want:-
this.props.getCampaignTopics(1).then((result)=>{ // Need result here });

Hello I am trying to install the npm install. It fails with below error every time. Can you suggest what is wrong here ?

PS C:\Users\ajasaini1\react-redux-boilerplate> npm install
npm WARN deprecated [email protected]: Please upgrade to kleur@3 or migrate to 'ansi-colors' if you prefer the old syntax. Vis
it <https://github.com/lukeed/kleur/releases/tag/v3.0.0\> for migration path(s).
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated [email protected]: use String.prototype.padStart()
npm WARN deprecated [email protected]: core-js@<2.6.6 is no longer maintained. Please, upgrade to core-js@3 or at least to a
ctual version of core-js@2.
npm ERR! Error while executing:
npm ERR! C:\Users\ajasaini1\AppData\Local\Programs\Git\cmd\git.EXE ls-remote -h -t git://github.com/shahata/jsdelivr-cdn
-data.git
npm ERR!
npm ERR! fatal: unable to connect to github.com:
npm ERR! github.com[0: 192.30.253.113]: errno=No such file or directory
npm ERR!
npm ERR!
npm ERR! exited with error code: 128

Hi,
Could you add somewhere example (maybe in Q&A) how to configure Express side server with your boilerplate? I would love to see how it work with BrowserSync (which is included).

I need react-router support (after refreshing page i got " Cannot GET /active " ).

I can't delete this issue. Answer:

In webpack:
devServer: {
historyApiFallback: true
},