- Where are Babel and ESLint configured?
- Where are the files coming from when I run
npm start
? - How do I fix
Error: listen EADDRINUSE 127.0.0.1:3000
? - Issue with local caching when running in production mode (F5 / ctrl+F5 / cmd+r weird behavior)
- Local webfonts not working for development
- Non-route containers
- Use CI with bitbucket pipelines
- I'm using Node v0.12 and the server doesn't work?
- How to keep my project up-to-date with
react-boilerplate
? - How to turn off Webpack performance warnings after production build?
- Styles getting overridden?
- Have another question?
In package.json
In development Webpack compiles your application runs it in-memory. Only when
you run npm run build
will it write to disk and preserve your bundled
application across computer restarts.
This simply means that there's another process already listening on port 3000.
The fix is to kill the process and rerun npm start
.
-
Find the process id (PID):
ps aux | grep node
This will return the PID as the value following your username:
janedoe 29811 49.1 2.1 3394936 356956 s004 S+ 4:45pm 2:40.07 node server
Note: If nothing is listed, you can try
lsof -i tcp:3000
-
Then run
kill -9 YOUR_PID
e.g. given the output from the example above,
YOUR_PID
is29811
, hence that would mean you would runkill -9 29811
-
Find the process id (PID):
netstat -a -o -n
This will return a list of running processes and the ports they're listening on:
Proto Local Address Foreign Address State PID TCP 0.0.0.0:25 0.0.0.0:0 Listening 4196 ... TCP 0.0.0.0:3000 0.0.0.0:0 Listening 28344
-
Then run
taskkill /F /PID YOUR_PID
e.g. given the output from the example above,
YOUR_PID
is28344
, hence that would mean you would runtaskkill /F /PID 28344
Your production site isn't working? You update the code and nothing changes? It drives you insane?
To fix it on your local browser, just do the following. (Suited when you're testing the production mode locally)
Chrome dev tools > Application > Clear Storage > Clear site data
(Chrome)
Read more at https://github.com/NekR/offline-plugin/blob/master/docs/updates.md
In development mode CSS sourcemaps require that styling is loaded by blob://, resulting in browsers resolving font files relative to the main document.
A way to use local webfonts in development mode is to add an absolute output.publicPath in webpack.dev.babel.js, with protocol.
// webpack.dev.babel.js
output: {
publicPath: 'http://127.0.0.1:3000/',
/* … */
},
Note: Container will always be nested somewhere below a route. Even if there's dozens of components in between, somewhere up the tree will be route. (maybe only "/", but still a route)
While you can include the reducer statically in reducers.js
, we don't recommend this as you lose
the benefits of code splitting. Instead, add it as a composed reducer. This means that you
pass actions onward to a second reducer from a lower-level route reducer like so:
// Main route reducer
function myReducerOfRoute(state, action) {
switch (action.type) {
case SOME_OTHER_ACTION:
return someOtherReducer(state, action);
}
}
That way, you still get the code splitting at route level, but avoid having a static combineReducers
call that includes all of them by default.
See this and the following lesson of the egghead.io Redux course for more information about reducer composition!
Your project is on bitbucket? Take advantage of the pipelines feature (Continuous Integration) by creating a 'bitbucket-pipelines.yml' file at the root of the project and use the following code to automatically test your app at each commit:
image: gwhansscheuren/bitbucket-pipelines-node-chrome-firefox
pipelines:
default:
- step:
script:
- node --version
- npm --version
- npm install
- npm test
We settled on supporting the last three major Node.js versions for the boilerplate – at the moment of this writing those are v5, v6 and v7. We highly recommend upgrading to a newer Node.js version!
If you have to use Node.js 0.12, you can hack around the server not running by using babel-cli
to
run the server: npm install babel-cli
, and then replace all instances of node server
in the "scripts"
in the package.json
with babel server
!
While it's possible to keep your project up-to-date or "in sync" with react-boilerplate
, it's usually
very difficult and is therefore at your own risk and not recommended. You should not need to do it either, as
every version you use will be amazing! There is a long term goal to make this much easier but no ETA at the moment.
Webpack recommends having those performance hints turned off in development but to keep them on in production. If you still want to disable them, add the next lines to the config in webpack.prod.babel.js
:
performance: {
hints: false
}
You can find more information about the performance
option (how to change maximum allowed size of a generated file, how to exclude some files from being checked and so on) in the Webpack documentation.
There is a strong chance that your styles are getting imported in the wrong order. Confused? Let me try and explain with an example!
// MyStyledComponent.js
const MyStyledComponent = styled.div`
background-color: green;
`;
/* styles.css */
.alert {
background-color: red;
}
// ContrivedExample.js
import MyStyledComponent from './MyStyledComponent';
import './styles.css';
const ContrivedExample = (props) => (
<MyStyledComponent className="alert">
{props.children}
</MyStyledComponent>
);
With the magic of webpack, both MyStyledComponent.js
and styles.css
will each generate a stylesheet that will be injected at the end of <head>
and applied to <MyStyledComponent>
via the class
attribute.
So, will <ContrivedExample>
have a green background or a red background?
Applying the rules of specificity, you
may think red as styles.css
was imported last. Unfortunately, at the time of writing
an open issue "CSS resolving order"
means you cannot control the order in which the stylesheets are injected. So, with this contrived
example, the background could be either green or red.
To resolve the issue, you can either:
1) Increase the specificity of the CSS you want to win
/* styles.css (imported css to win) */
.alert.alert {
background-color: red;
}
// MyStyledComponent.js (styled-component css to win)
const MyStyledComponent = styled.div`
&& {
background-color: green;
}
`;
2) Import the CSS in the <head>
of your index.html
manually
This is a good choice if you are having issues with third-party styles and global-styles.js
// Import bootstrap style (e.g. move this into the <head> of index.html)
import 'bootstrap/dist/css/bootstrap.min.css'
// Import CSS reset and Global Styles
import './global-styles';
More information is available in the official documents.
Submit an issue, hop onto the Gitter channel or contact Max direct on twitter!