gilbarbara / react-redux-saga-boilerplate

Starter kit with react-router, react-helmet, redux, redux-saga and styled-components

React-Redux-Saga Boilerplate

Demo

Provides

• react ^18.x
• react-router-dom 6.x
• react-helmet-async 2.x
• emotion 11.x
• @reduxjs/toolkit 2.x
• redux-saga 1.x
• redux-persist 6.x

Development

• vite 5.x

npm start

Building

• vite 5.x

npm run build

Code Quality

• eslint 8.x
• stylelint 16.x

npm run lint / npm run lint:styles

Unit Testing

• jest 29.x
• @testing-library/react 14.x

npm test / npm run test:watch

End 2 End Testing

• cypress 13.x

npm run test:e2e

react-redux-saga-boilerplate's Issues

Issue: 'React' is declared but its value is never read

I'm facing that issue " 'React' is declared but its value is never read"

Where can we get the destination link to change from this boilerplate.

https://github.com/gilbarbara/react-redux-saga-boilerplate/blob/0136d1213e4d1665144448e2d353dc46f885d40e/tools/publish.js#L14C14-L14C14

fix tools `commits` method

it shouldn't break if the project hasn't been initialized by git.

How to deploy in production?

Since it is not using react-scripts, I believe something else have to be done to deploy it in production. When I deploy it on the server, I generate the build folder and do npm start, but that is starting the dev server, which should not happen in production. What should I do instead?

Please help

Could not run the app

os: mac
node version v8.11.3

Action made;
npm install
npm run start

➜ react-redux-saga-boilerplate git:(master) ✗ npm run start

[email protected] start /Users/doron/projects/react/open-source-projects/react-redux-saga-boilerplate
node tools/start.js

Plugin could not be registered at 'html-webpack-plugin-before-html-processing'. Hook was not found.
BREAKING CHANGE: There need to exist a hook at 'this.hooks'. To create a compatiblity layer for this hook, hook into 'this._pluginCompat'.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: node tools/start.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/barakhaviv/.npm/_logs/2018-08-19T03_30_54_634Z-debug.log
➜ react-redux-saga-boilerplate git:(master) ✗

Hope there is a quick fix.
Thanks

Question - TypeScript-like syntax in createActions objects

In the scripts/actions/app.js within the createActions function, an object is being passed with a dynamic key and a function as a value. This function has a query: string argument and shows distinct similarity to TypeScript syntax.

Example:

createActions({
  [ActionTypes.SWITCH_MENU]: (query: string) => ({ query }),

I am curious to how this is possible given the .js file type.

I looked into the redux-actions library but could not find any reference to this implementation with the type.

The project compiles and runs fine with leaving the types in or taking them out.

Thanks,

Insecure dependency

[email protected] appears to contain injected malware and was pulled from the registry, please update to 4.0.1 or higher.

missingDeps.some is not a function

I have this error when i try to run the app

Starting the development server...
/Users/marco.pajares/projects/react-redux-saga-boilerplate/tools/start.js:11
  throw err;
  ^

TypeError: missingDeps.some is not a function
    at compiler.plugin (/Users/marco.pajares/projects/react-redux-saga-boilerplate/node_modules/react-dev-utils/WatchMissingNodeModulesPlugin.js:25:23)
    at _err0 (eval at create (/Users/marco.pajares/projects/react-redux-saga-boilerplate/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:12:1)
    at Promise.resolve.then.then.then.then.then.then.then.then.catch.then.then.then (/Users/marco.pajares/projects/react-redux-saga-boilerplate/node_modules/html-webpack-plugin/index.js:224:11)

Recommendation for subroutes

I am creating a SPA with your boilerplate. I have a dashboard with a menu that contains multiple sections and subsections. For each one of those private sections, I have a new container and a new route, but that does make no sense. I want to reuse the private route with different containers.

Is my approach ok? what would be the best approach?

Thanks

Can not `npm run build` ENAMETOOLONG error

Hello contributors!

I try run npm run build at production and get the error

ENAMETOOLONG: name too long, open '/usr/share/nginx/build/static/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTE0LjUgMi41aC0xM0EuNS41IDAgMDAxIDN2MTBhLjUuNSAwIDAwLjUuNWgxM2EuNS41IDAgMDAuNS0uNVYzYS41LjUgMCAwMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwMTAgMiAxIDEgMCAwMTAtMnptOC4wMyA2LjgzYS4xMjcuMTI3IDAgMDEtLjA4MS4wM0gyLjc2OWEuMTI1LjEyNSAwIDAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAxLjE3Ny0uMDE2bC4wMTYuMDE2TDcuMDggMTAuMDlsMi40Ny0yLjkzYS4xMjYuMTI2IDAgMDEuMTc3LS4wMTZsLjAxNS4wMTYgMy41ODggNC4yNDRhLjEyNy4xMjcgMCAwMS0uMDIuMTc1eiIgZmlsbD0iIzhDOEM4QyIvPjwvc3ZnPg==.8703e22.bin'

Could you know the reason? My env

• Node Version: 16.18
• Machine: EC2 AWS

Multiple Environments

Hi GilBarbara, thank you for the awesome boilerplate. Can you tell me how to set up environment for staging , QA etc? Need to have separate set of API urls for each of them.

How to create snaps?

Tests are failing because the snaps are not updated. How can I regenerate them?

Visual Studio Code does not recognise module imports

Hi, It would be good to add this file for resolving the path for modules in Visual Studio Code

jsconfig.json

// https://code.visualstudio.com/docs/languages/jsconfig
{
  "compilerOptions": {
      "baseUrl": "./",
      "paths": {
        "actions/*": ["app/scripts/actions/*"],
        "components/*": ["app/scripts/components/*"],
        "config/*": ["app/scripts/config/*"],
        "constants/*": ["app/scripts/constants/*"],
        "modules/*": ["app/scripts/modules/*"],
        "reducers/*": ["app/scripts/reducers/*"],
        "routes/*": ["app/scripts/routes/*"],
        "sagas/*": ["app/scripts/sagas/*"],
        "utils/*": ["app/scripts/utils/*"],
      }
  }
}

can't remove loader component

I'm new in react .... I've removed the loader component, but it still showing the loader even I deleted the file Loader.jsx

How to add scss files in bundle

Currently I have created scss folder in /assets and included the files in App.jsx. But when I create build those files comes under local path /home/test-test/mw-react-new/react-app/assets/ in source in google Chrome. So what is proper way to include scss files and how to add those files in bundle?

Need information about redux flow

Hai

Is interested using this boilerplate but I have some confusing issues in redux flow, while I'm trying create new action, reduces and saga but I always have problem with dispatch function because of action is always got error it say :

Object(...) is not a function

Cache problem for production build and build is not updating until we refresh

There is cache problem for production build and build is not updating until we refresh once new build upload.

How can I debug the app?

Hello guys,

I'm trying to put a breakpoint into GitHub component and my Chrome line debug column is greyed out. Can you help me?

I'm using Chrome 66 with Javascript source maps enabled.

Boostrap4 JS

Best way to include bootstrap JS into the build process?

Licensing?

What is the license for this boilerplate? Thanks!

Not able to create production build

Errors:

1. (node:4444) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead
   Failed to compile.

chunk scripts/bundle [entry]
({
chunk: chunkData
}) => this.options.moduleFilename(chunkData)
output.replace is not a function

2. Cannot destructure property createHash of 'undefined' or 'null'.

Issue resolving styled-minimal in boilerplate

When you checkout the project and run npm install, there is an error as Cannot resolve react in styled-minimal dependency. Unable to resolve Dependency Tree.
Can you pls check.

Issue with folder color in editor

Can not be used React.lazy or react_loadable

I can not run npm start or build when using React.lazy() or https://github.com/jamiebuilds/react-loadable.

Can you help?
Thanks

Build option does not copy all the media folder content

"Build" option should copy all the content from media folder to dist/media but just copies icon.png and icon.svg

What am I doing wrong?

CSS folder not getting created

While running the cmg npm run build, the build is getting created with few issues.

1. The githash is not working, leading the main.js file to be named as main..js (same with the chunk file)
2. CSS folder does not get created.

Collator could not be initialised and wouldn't be used.

Hi,

I just cloned the repo and installed the node modules using npm install. It is working fine in the modern browsers but not working in the IE 11.

Error in the console is "Collator could not be initialised and wouldn't be used."

Steps to reproduce

1. Clone the repo.
2. npm i
3. npm start
4. open IE11 and check

Thanks.

Can we also do SSR using this build? Will next.js work?

I wanted to know if anyone used this setup or modified this setup to work with SSR found a old issue regarding it but it was closed for inactivity.

Not Found: [email protected]

npm install
command show this error ..
Not Found: [email protected]

how to fix it .
Thanks

Cannot get Semantic UI css to apply

Hi there, I'm trying to use semantic ui: https://semantic-ui.com/ but running into some difficulties. I downloaded semantic ui and included the following in assets/index.html:

  <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css">
```.
However,  css classes from semantic ui does not seem to be applying. Is there something that I need to use when using third party css frameworks?

Thank you for reading my message and I hope to hear back soon.

npm run build is not working on Windows

While running npm run build I am getting this error.
I am on
windows 64bit system
node version = 11.10.0
npm version = 6.7.0

exteranal css path not found

hello,
i have add css path in assets/index.html file but not found

Adding DependaBot

Hi @gilbarbara,

What do you think in add DependaBot to this project? This will be good to keep all dependencies up-date...

script is not loading when I run the in dev environment

Hi,

when i run the app using npm start, it give me the following error on console window. It seems like bundled files are not referencing correctly for me. Is there any configuration I need to change?

Thanks,
Tamilselvan S.

get react-router Error while hot reloading.

Get You cannot change <Router routes> error while hot reloading.

eslint sublime text import/no-unresolved

Custom paths like import rootSaga from 'sagas/index'; trigger a import/no-unresolved eslint warning in sublime text.
The reason is in paths.js:

const appDirectory = fs.realpathSync(process.cwd());
const resolvePath = relativePath => path.resolve(appDirectory, relativePath);

It seems like process.cwd() doesn't return the expected path when eslint runs it, and it corrupts paths.appSrc found in webpack.config.js at modules: [paths.appSrc, paths.nodeModules].
It starts working when replacing the above block by

const resolvePath = relativePath => path.resolve(__dirname, '..', relativePath);

Does this have SSR or universal rendering with sagas

I was keen to know as I'm stuck at one of the problems regarding that

Thanks

.ENV File

Can you share your version of the .env file here for future reference. As while running npm run build the js folder inside build is just producing main..js without the hash.

[Q] - Why don’t you use Webpack 4?

I am just wondering why don't you use Webpack 4?