moduscreateorg / budgeting Goto Github PK
View Code? Open in Web Editor NEWBudgeting - React + Redux + Webpack (tree shaking) Sample App
Home Page: https://budget.modus.app
License: MIT License
Budgeting - React + Redux + Webpack (tree shaking) Sample App
Home Page: https://budget.modus.app
License: MIT License
Automatically format files using Prettier in a pre-commit hook. Guide: https://prettier.io/docs/en/precommit.html
Going with option 1, this would require adding 2 new dev dependencies: lint-staged and husky.
How does one know the tree shaking is done properly. In the webpack-visualizer, it seems like all of the npm packages were imported in full.
Let's make this a PWA
Ability to create multiple accounts for transactions
It would be awesome to see some simple tests for this environment.
I do not see the vender.js file in your online webside,how did u do this; because of webpack 2 (the tree shaking)?
It's not working for Internet Explorer(Edge, 10, 9)
Please open below url in IE browser.
Please see attached screenshot.
Thanks,
BSR
I've wanted to use this project to bootstrap another React app, so I've just spent some short time removing the business logic, branding and config related to budgeting app.
Maybe it would be useful to keep a branch or a tag with a clean boilerplate in this repo?
These are the changes I've made to my fork: link.
If you think this might be a good idea, I can do another sweep and write better docs on this.
Does it make sense to pre-load resources with higher priority than main module?
It should affect on time to interactive.. isn't it?
And the second question is - It seems like 'reports.js' is downloaded twice:
Can you help me to figure it out, please?
PS I'm using chrome with cache enabled; yarn run prod
C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack-dev-server\bin\webpack-dev-server.js:385
throw e;
^
Error: options/query provided without loader (use loader + options) in {
"test": {},
"exclude": {},
"use": "file-loader",
"query": {
"name": "[name].[ext]"
}
}
at Function.RuleSet.normalizeRule (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\RuleSet.js:168:9)
at C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\RuleSet.js:83:19
at Array.map (native)
at Function.RuleSet.normalizeRules (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\RuleSet.js:82:16)
at new RuleSet (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\RuleSet.js:75:23)
at new NormalModuleFactory (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\NormalModuleFactory.js:47:17)
at Compiler.createNormalModuleFactory (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\Compiler.js:438:28)
at Compiler.newCompilationParams (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\Compiler.js:451:29)
at Compiler.compile (C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\Compiler.js:460:20)
at C:\Projekty\budgeting-sample-app-webpack2-master\node_modules\webpack\lib\Compiler.js:47:17
npm ERR! [email protected] start: `webpack-dev-server`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is most likely a problem with the webpack2-react-redux-budget-app-sample package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server
npm ERR! You can get their info via:
npm ERR! npm owner ls webpack2-react-redux-budget-app-sample
npm ERR! There is likely additional logging output above.
npm ERR! System Windows_NT 10.0.14393
npm ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\ProgramData\\chocolatey\\lib\\npm\\tools\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! cwd C:\Projekty\budgeting-sample-app-webpack2-master
npm ERR! node -v v7.2.1
npm ERR! npm -v 1.4.9
npm ERR! code ELIFECYCLE
npm ERR!
npm ERR! Additional logging details can be found in:
npm ERR! C:\Projekty\budgeting-sample-app-webpack2-master\npm-debug.log
npm ERR! not ok code 0
It's common to see loaders like this in Webpack 1:
loaders: [
'isomorphic-style'
'css?sourceMap'
'postcss?sourceMap'
'sass?sourceMap'
]
This example isn't represented in this Webpack's config file.
Is that out of the scope of this sample project or is it something you're considering adding?
This project is currently running on CircleCI 1.0 which will no longer be supported after August 31, 2018.
Migration guide to CircleCI 2.0: https://circleci.com/sunset1-0/
I'm running “npm run build”, so 1.7M!!!!
what happend?
I can't run npm install
, beause of peerDependencies:
npm ERR! Linux 3.13.0-83-generic
npm ERR! argv "/usr/bin/node" "/usr/bin/npm" "i"
npm ERR! node v0.12.12
npm ERR! npm v2.14.9
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@1 || ^2.1.0-beta
npm ERR! peerinvalid Peer [email protected] wants webpack@>=2.0.3-beta <3
npm ERR! Please include the following file with any support request:
npm ERR! /home/.../budgeting-sample-app-webpack2/npm-debug.lo
Please add .idea
files to .gitignore
.
It's not working. I have uploaded build with _redirects at http://fd.arcgate.in/budget and when we hard reload or refresh this page then show below error.
Not Found
The requested URL /budget was not found on this server.
Apache/2.2.15 (CentOS) Server at fd.arcgate.in Port 80
Thanks.
On the current master branch, I end up with this error when I run npm run build
.
ERROR in main-ee2fb0ea.js from UglifyJs
DefaultsError: `screw_ie8` is not a supported option
Update dependencies to use https://github.com/ModusCreateOrg/modus-react
Potential solution:
After npm i
, npm start
:
npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.8.1
npm ERR! npm v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! webpack2-react-redux-budget-app-sample@1.0.0 start: `webpack-dev-server --history-api-fallback --progress --port 3000`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the webpack2-react-redux-budget-app-sample@1.0.0 start script 'webpack-dev-server --history-api-fallback --progress --port 3000'.
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 webpack2-react-redux-budget-app-sample package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --history-api-fallback --progress --port 3000
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs webpack2-react-redux-budget-app-sample
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls webpack2-react-redux-budget-app-sample
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/lex93ushakov/lab/budgeting-sample-app-webpack2/npm-debug.log
Including React Router 4 would be great, thanks
Hello,
The Lint Task does not seem to work, when I run "yarn run lint" I get the following error:
/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint-config-airbnb-base/rules/style.js:
Configuration for rule "no-restricted-syntax" is invalid:
Value "[object Object]" must be an enum value.
Referenced from: /Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint-config-airbnb-base/index.js
Referenced from: eslint-config-airbnb
Referenced from: /Users/markpaul/Documents/Source/Research/testagain/.eslintrc
Error: /Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint-config-airbnb-base/rules/style.js:
Configuration for rule "no-restricted-syntax" is invalid:
Value "[object Object]" must be an enum value.
Referenced from: /Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint-config-airbnb-base/index.js
Referenced from: eslint-config-airbnb
Referenced from: /Users/markpaul/Documents/Source/Research/testagain/.eslintrc
at validateRuleOptions (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-validator.js:109:15)
at Object.keys.forEach.id (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-validator.js:156:13)
at Array.forEach (native)
at Object.validate (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-validator.js:155:35)
at load (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-file.js:529:19)
at configExtends.reduceRight.e (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-file.js:391:36)
at Array.reduceRight (native)
at applyExtends (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-file.js:362:28)
at load (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-file.js:536:22)
at configExtends.reduceRight.e (/Users/markpaul/Documents/Source/Research/testagain/node_modules/eslint/lib/config/config-file.js:391:36)
✨ Done in 1.46s.
Would it be beneficial if we just add all dependencies
from package.json
as vendor files in
webpack.config.js
Hi Team,
I'm waiting for your updated "Budgeting App" with Webpack v4, ES8 or ES7, React v16, and Redux v4.
Thanks,
BSR
Source map for sass not work http://take.ms/QgOVF
But i change config for development version - http://take.ms/TOmSZ . But if i add source map for css-loader i see my source
Convert Babel to v7
Current maintainability score is B. Code climate shows how to improve that score here: https://codeclimate.com/github/ModusCreateOrg/budgeting
Let's get that A!
Use redux sagas instead of thunk
N/A
not using sagas
use sagas to make async actions more predictable and easier to test
After cloning the project and installing the dependencies, when I run "npm start" I get:
Cannot find module './dll/d3-manifest.json'
is this a problem on my end or the project?
Thank you in advance!
add storybooks https://storybook.js.org/
N/A
N/A
use storybooks for component development and documentation
Great work so far! When profiling the app on an EM connection (pretty real world 3G with accountability for spottiness) we don't see first meaningful paint until about 9 seconds in:
If we dig into the waterfall we can see that quite a few of your critical path requests are taking a while to get fetched, pushing out the point when all of the JS gets fetched, parsed and executed.
Looking at the source you're using prefetch instead of preload here:
This will actually force your scripts to be loaded with a lower priority than if you use preload. I would strongly reco trying to use preload
for these here.
Your total amount of JS in the app is relatively small. Still way under 100KB from what I can see.
Flow seems to have all kind of issues (e.g. memory bloat). Even Facebook migrates from Flow to TypeScript.
Here's a good blog post that describes the transition: https://davidgom.es/porting-30k-lines-of-code-from-flow-to-typescript/
I noticed that .map files are present even when you build source for production. Is it be design or a mistake? I always thought that you do not want to have maps on your production but just uglified/minified code for speed.
currently the React Hot Loader version 3.0.0-beta.7, please migrate it to v4
It appears that this code has some of the issues discussed on this thread:
Specifically, I had to remove the -p option or the Uglify plugin ran twice. Also, -p was not setting the NODE_ENV variable, so the production parts of the webpack.config were never being run. If I manually set the NODE_ENV at the command line to 'production', it would run the production sections of the webpack.config.
Clearing the NODE_ENV (set NODE_ENV=) and running webpack (no -p) result in a 1 meg package. Even if I manually set NODE_ENV, I get a 56k (gzip/min package), which is different than your size, so I am wondering what's wrong.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.