![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-isomorphic-boilerplate
Advanced tools
Readme
This boilerplate would help you build a react/redux/react-router isomorphic/universal web app
# we need babel-node to execute es6 server scripts
npm install -g babel-cli
# install dependencies
yarn
# start dev env with hot reload
# it runs with
# [--inspect](https://nodejs.org/en/docs/guides/debugging-getting-started/#enable-inspector)
# you can debug nodejs server on chrome-devtools.
yarn start
then visit localhost:3333
to see result.
All development code are built with source map.
Since styles are hotload with yarn start
, so you might see FOUC. You can do a dev build to see how it would actually work:
yarn build:browser:dev && yarn build:server:dev
node dist/server/index.js
Import stdout.js
and define namespace (example), then turn on debug message depends on platform:
localStorage.debug = '*'
in console.DEBUG=*
, see package.json.scripts.start
.In production build, server side log would stay untouched to easily debug by checking log file, and on browser side, all debug message would be removed by remove-debug-loader.
src/assets
.On the other hand, node server only serves static files in /dist/assets
which means /src/assets/ files not imported to your code base are not accessible from your web server.
file-loader will exports them to static folder with hash key and handle url transform. (so you don't have to worry about cache issue)
global.scss
in your entry component, or define your own styles for specific entry then import them.style.scss
in containers folder only set styles for react component in the folder of same level, and starts with most root class name of that component. (see src/containers/Home/style.scss)extract-text-webpack-plugin would extract style sheet from built code into target dist folder.
loadData
method in your route to prefetch data needed for SEO. (example)AVA as test runner.
Don't use webpack alias in code base.
mock-require mocks dependencies to make test as independent as possible.
As it's name says, it only support require
, so in your test file, remember you have to require the target testing module, import
does not work.
Also if your testing module is defined in es6 way (export default
), remember to append .default
to get the default export. (see server test for example)
Build your code with:
yarn run build:browser:prod
yarn run build:server:prod
and PORT={your_port} node dist/server/index.js
then your app runs on localhost:{your_port}
.
This is less likely to use, but somehow handy when you want to seperate your app into individual entries.
To add a new entry, do following:
webpack.browser.js
./src/routes
, take /src/routes/main.js as reference, define your routes for the new entry here./src/reducers
if needed./src/entries
, take /src/entries/main.js for example, replace Routes
to the one you defined in step 2 and/or replace reducer to the one defined in previous step./src/server/entryAndRoute.js
, modify entryRouteInfos
, entryReducerMap
and entryRouteComponentMap
variables.anotherEntry
is added from steps above.Multiple entry gives a huge benefit to bundle size, but you will lose SPA between different entries (which means you can't <Link /> to each other).
Make sure you know the reason to necessarily seperate app into different entries, visit http://localhost:3333/another-entry
to see it's in life.
In this boilerplate, we build our own server app, which means we have to implement hot reload by ourself.
In order to do this, we use 4 libraries listed below:
then here is the tricky part, the 4th one makes server side hot reload work:
webpack-hot-server-middleware has a very important convention - server bundle needs to be a function returns a middleware function (see /src/server/renderer.js
),
so in webpack.server.js
, you can see hot build has different entry (renderer.js, others are index.js), and in
/src/server/index.js
, you will see how server runs on hot environments different to others.
On the other hand, webpack-hot-server-middleware only watch changes on /src/server/renderer.js
and its children, so hot reload doesn't work outside that scope, e.g /src/server/api.js
,
you have to rerun yarn start
to see it take place.
basically we can approach by define our multi-lingual words in yaml(s) and get them by key and locale.
MIT
FAQs
This boilerplate would help you build a react/redux/react-router isomorphic/universal web app
The npm package react-isomorphic-boilerplate receives a total of 3 weekly downloads. As such, react-isomorphic-boilerplate popularity was classified as not popular.
We found that react-isomorphic-boilerplate demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.