I started to develop a new project, where frontend is on react, backend is on java play. I don't use nodejs and npm.
I try to import component that i developed and get error "ReferenceError: require is not defined". As far as i understand, the solution is to combine all react jsx files to one, using tool like webpack.
Can it be achieved using webpack, without installing npm, with the help of maven and\or IntelliJ?
Practically speaking: no.
Webpack is a Node-based application, and to install and run it you need both Node and NPM.
Not only that, but for Webpack to do anything meaningful, it requires "loaders" that are Node modules which should be installed with NPM as well.
Lastly, when developing React apps, any external modules that your app will depend on (including React itself) should also be installed with NPM.
However, you don't need to install Node/NPM in your production environment. Webpack will generate JS-bundles that you can load into your HTML just as any regular JS script, and that part of the process doesn't require Node or NPM.
So you'll need it during development, but not in production.
Related
Let's say that I have a react app that I've created with create-react-app.
I've installed useless-dependency, but I haven't called it anywhere in my app. I didn't install it as a dev dependency, just as a regular dependency.
Then I run npm build on my app. Will useless-dependency be bundled in with my app, or will the final build be clever enough to ignore it?
In variaous React documentation I see it being added as a prod dependency but I'm not understanding why. Shouldn't it be a devDependecy since SASS only gets compiled during development and when pushed to prod you are actually pushing the compiled CSS files?
Since it's required to do a production build, it should be in the production dependencies list imho.
In my experience, most of the time the project gets build afresh for production, so needs all the packages required to build from scratch.
A dev dependency might something like webpack-dev-server which isn't needed for a prod build, but clearly is used in development (assuming one is using it).
On the official NPM site of sass (linked also here: " Sould SASS be installed as a 'dependency' or as a 'devDependency? ") it is suggested to install it as development dependency (aside from installing it globally) so I believe that's the way to go.
Also, as it's suggested on official Node website, Babel should be installed as a development dependency and that's the package that, I believe, may be required to create a production build. Considering that I think that all packages that are not required during runtime of an application should be installed as development dependencies.
I'm developing my first big react app, which will be served dynamically by Express, so it came to my mind, that dependencies (not devDependencies) are just Express and maybe some deployment keep-running-eternally package, but not react, redux, react-router etc, which are conventionally mentioned in package.json deps. All my app is bundled and cooked before deployment, so how correct is it to mention react related deps as dependencies in config.json?
This library is, after I have tried several boiler plates for react server-side-rendering, the simplest! Unlike other libraries which consist a lot of complicated things at first (redux, relay, graphQL etc.,) this library gives detailed explanation on how to do isomorphic react app with the minimum set of only react express and few other necessary ones: (or course in ES6, too)
https://medium.com/front-end-hacking/server-side-rendering-with-react-and-express-382591bfc77c
You just need to install it:
npm install react-server-boilerplate --save
After that, build and start
cd react-server-boilerplate
npm install
npm run build
npm start
Then, use curl in your command line's terminal so check if it truly returns data for SSR or not :
curl http://localhost:8080
The github of that library: https://github.com/Roilan/react-server-boilerplate
I started to build a component library that I want to publish on NPM (and reuse in other apps) by creating a React app using create-react-app. Unfortunately the create-react-app default configuration doesn't seem to support building such component libraries (see these issues). So it seems I have to eject.
Do you have some instructions what to configure after ejecting to make this a component library I can reuse in other apps (I guess some Webpack stuff)?
Re-framing my comments into an answer.
Don't eject! CRA hides a lot of stuff under the hood and ejecting throws it up. It's relatively easier to just clone your src into another project with the tooling setup done.
And it's not very difficult to setup one yourself! Here's the things you will need to do:
Basic babel and webpack configuration so your code compiles.
Make sure React and React-DOM are added as external dependencies in your package.json file and added as alias in your webpack.config.js. (A thorough discussion is here.) This is important to ensure you ship the smallest bundles only. Also, React doesn't play well with multiple copies.
Optionally, do the same for any other heavier libraries, e.g. Material-UI, Bootstrap, Lodash etc.
In webpack's configuration, decide how you want your library exports should be? You should be good with UMD.
Add main (and optionally module) entries in your package.json to let npm imports know where the components should be imported from.
Publish it.
Done!
Or, you can simply clone one of these super thin component projects and put in your components there -
https://github.com/wangzuo/react-progress-label
https://github.com/aaronshaf/react-toggle
There are more complete starter-kits as well, but IMO it's important to first know the details yourself before you abstract them away. Once you are familiar with the process, you should try leveraging the kits too as they go much beyond the basics, like test integration, react-storybook support and great npm publishing support.
UPDATES:
The purpose of CRA is to allow quick experimentation and on-boarding to React development, without going through the (somewhat complicated to a beginner) tooling setup. The intended use case of CRA, as denoted by the "App" in the name, is the whole app, not a component. Although developing anything built on language features like ES6 takes some tooling, an app typically takes more setup than a component. E.g. you also need a server component which hosts the generated code. CRA does all this and more for you.
And if you are working on an app, you will eject when you want to take control of the server side of it. It adds value in that case as you will get the basic hosting code auto-generated by CRA during eject.
To address test needs, CRA also has Jest integration, which is a test runner having React specific features like snapshot testing. Again, setting it up manually with your build pipeline is a handful and CRA once again hides all of this complexity from you, so you can simply focus on writing the tests.
This is super simple - you don't actually need webpack if you want to publish a package. Don't install it just for that if you don't want to.
If you use ES6:
You can use a simple script to create a dist folder that babel will create the files after transpiling:
"scripts": {
// other scripts
// .. might want to change "rm -rf" below if you're on a PC
"build:production": "rm -rf es && cross-env NODE_ENV=production node_modules/.bin/babel ./src -d es"
},
What this does is:
Remove the es folder, which is a build folder.
Runs babel for your files (in case they are located in src folder, change it to wherever your files reside) and create the es folder with the transpiled files.
In order to use the script above you need to install the following dependencies:
babel-cli / babel-core / babel-preset-es2015 / cross-env
Make sure you have a .babelrc file so that babel will work:
{
"presets": [
["es2015", { "modules": false }]
]
}
Now all you have to do (after running npm run build:production) is to run:
npm publish
And your library is published in npm. This is also the command you run if you want to update, just don't forget to update the version number in your package.json.
In case you have files you dont want published to npm, just have a file in your root called .npmignore (similar to .gitignore) and list everything you want excluded.
If you don't use ES6:
In this case you don't need to transpile anything, just go straight to the npm publish section above and run it on the root folder you want published.
create-react-app is meant for quick setting up and development of apps, not really for development of libraries. For one thing, create-react-app creates an index.html file when building, which is usually not needed by libraries. Libraries require a different set of configuration (much less).
I faced this problem myself and have written a React component boilerplate for writing and publishing React components: https://github.com/yangshun/react-component-starter, after referencing how popular ES6 libraries were written, such as Redux.
Pros:
Similar to create-react-app, batteries are included
It has got all the important areas covered: development, linting, testing, and distributing
Minimal configuration
Babel for transpilation to ES5 and CommonJS format
ESLint included and configured
Jest tests examples
Webpack configuration that compiles to UMD
React Storybook for quick development of the components
Support for stylesheet distribution alongside your component
Cons:
Highly opinionated in terms of choice of tooling; they follow the choices set by create-react-app.
Have to manually update each package dependencies in future (you'll face this issue if you did eject anyways)
There is minimal configuration included and setup is easy. The various webpack, Babel and ESLint configurations should be quite understandable.
Hope this will be helpful to you. Feel free to give suggestions and comments on how it can be improved.
I have been following many react tutorials(just getting started). In all of them, node modules are locally installed within each project. But I don't want to download node modules all the time for each project. I want to install node modules(only react related packages like babel, webpack, webpack-dev-server, react and react-dom) globally, which resides in following location in windows (C:\Users\username\AppData\Roaming\npm\node_modules) and then refer them for all of my react projects and also bundle them using webpack. How can I do that? I tried searching, but did not get any solution so far. Kindly let me know if there are any options to achieve that.
Thanks.
Using global package is not a good idea. It is only recommended for development
You can use npm link <global-package> to use your global modules like local.
Link to refer https://docs.npmjs.com/cli/link
You can use npm install -g 'package name' to install it globally.