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
Related
I'm trying to share a React component I've created through a local hosted npm repo.
To do that I created the React component with typescript, transpiled it to js and published the resulting code to the repo. But when I install this package in an existing project (a basic create-react-app project with typescript) and try to use that component - My app tried to compile it for a few minutes and I fail to load that component. Sometimes if I wait a few minutes I see this error - although the component was tested and works:
Error: Invalid hook call. Hooks can only be called inside of the body
of a function component. This could happen for one of the following
reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug
and fix this problem.'
I've copied the same component to be embedded in the app and not installed by npm - it worked. I tried to strip the component to the bare minimum - it still takes a long time.
The steps to reproduce are easy:
I've shared the component in github:
https://github.com/ymoran00/example-stackoverflow-react
To build it you need to run npm install and then npm run build.
the result will be generated in the lib folder.
You can then go into the lib folder and run:
npm link
Then create a new typescript create-react-app project:
npx create-react-app my-app --template typescript
Go inside it and run:
npm link login-component
This will install the linked package.
Now go to App.tsx and import the package:
import LoginContainer from 'login-component/LoginContainer';
And use it in the App:
<LoginContainer onLogin={()=> {alert('success')}}/>
Run the app with npm start.
The App will open the browser - but nothing will load. It's kind of stuck on build or whatever - I don't know what happens there. If you'll take a look at the component you'll see it's quite a basic one with Material-UI.
The first place that I looked was your package.json file because it most likely that you are dealing with reason #1:
You might have mismatching versions of React and the renderer (such as React DOM)
I see that you are including react and react-dom as dependencies for your component. You should move these from dependencies to peerDepenedencies. You likely want to move #material-ui/core and #material-ui/icons to peerDependencies as well. Right now React is being bundled with your component and your component uses its own React version rather than the one in your app. You want to make it so that projects that use your component are expected to include React on their own.
For more information about why you should use peerDependencies, see this question:
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
It seems that the main problem I had in the process is using npm link.
It causes problems when combined with hooks - that's why I get this hooks error.
See also in this thread:
https://github.com/facebook/react/issues/13991
So instead of using npm link I've started using npm-sync and it seems to solve the problem.
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?
I need to display version of my react app in the footer in x.y.z format.
I need this version to increment every time I deploy the app by being provided a choice if I want to increment x or y or z.
How do I achieve this? :)
To bump the version of your app you can use npm version.
For example:
npm version minor
Once you have a way to bump the version in package.json (e.g. npm version, as suggested by #bertrand-p), you can then assign the version to an environment variable. For example, in .env you can set:
REACT_APP_VERSION=$npm_package_version
Then you can access the variable from within your app via process.env.REACT_APP_VERSION.
See also: https://github.com/facebook/create-react-app/issues/2466#issuecomment-357490359
I don't think the answers from #Bertrand P or #VulfCompressor tell the complete picture. I used genversion https://www.npmjs.com/package/genversion. The steps I did were:
npm install genversion --save-dev
Modify the build script in package.json to genversion --es6 src/autobuild_version.js && react-scripts build (I couldn't figure out a way to import the generated module from the lib directory as suggested in the genversion documentation so I had to put it in the src directory instead)
In the React app, import { version } from './autobuild_version' and use as appropriate
Add src/autobuild_version.js to .gitignore (other source code control tools are available)
npm run build
You can use grunt-bump to handle your app versioning. As for displaying your app version, refer to Is there a way to get version from package.json in nodejs code?.
You can use npm commands below in different conditions mentioned below and the commands will effect the version number in package.json in your react project.
You can access that version by installing dotenv by npm i dotenv oryarn add dotenv and use the .env file in your root folder and access the version number in the whole app with REACT_APP_VERSION=$npm_package_version. You can find more commands at npm version documentary page. commands below will add to version numbers like this: "version":"{major}.{minor}.{patch}"
If its a major change(bug fixing) in your app use:
npm version major
If its a minor change(bug fixing) in your app use:
npm version minor
And if it's just a patch upgrade such as changing some styles use:
npm version patch
You can use versioning for many purposes and one of them is for making sure client's cache will be renew and they would have the updated content.
I want to integrate https://github.com/Microsoft/BotFramework-WebChat/tree/v3 into my react app.
I have followed the below method and run npm install but it aint working.i have set my file to botchat.js in package.json:
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"botframework-webchat": "file:../../BotFramework-WebChat-3/botchat.js.map"
}
In Botframework document it is given as below
In your React website, incorporate a custom build of the Web Chat component
The simplest approach is to clone (or fork) this repo, alter it, build it, then reference your local build in your project's package.json as follows:
dependencies: {
...
'botframework-webchat': 'file:/path/to/your/repo'
...
}
Running npm install will copy your local repo to node_modules, and import/require references to 'botframework-webchat' will resolve correctly.
You may also wish to go so far as to publish your repo as its own full-fledged, versioned npm package using npm version and npm publish, either privately or publicly.
Different projects have different build strategies, yours may vary considerably from the above. If you come up with a different integration approach that you feel would have broad application, please consider filing a pull request for this README.
FOR BUILDING I FOLLOWED BELOW PROCESS
Building Web Chat
Clone (or fork) this repo
npm install
npm run build (to build on every change npm run watch, to build production npm run prepublish)
This builds the following:
/built/*.js compiled from the TypeScript sources in /src/*.js - /built/BotChat.js is the root
/built/*.d.ts declarations for TypeScript users - /built/BotChat.d.ts is the root
/built/*.js.map sourcemaps for easier debugging
/botchat.js webpacked UMD file containing all dependencies (React, Redux, RxJS, etc.)
/botchat.css base stylesheet
/botchat-es5.js is the Webpack bundle (a.k.a. botchat.js) plus polyfills for ES5 browsers
/botchat-fullwindow.css media query stylesheet for a full-window experience.
I want to customize my Botframework and execute it
I'm not sure what your question is as it looks like your able to compile the build. If you are looking to make custom changes, then you would do those pre-compile.
However, I would recommend you use the v4 BotFramework-WebChat, instead, as the v3 version (BotChat) is deprecated and unsupported (read here).
The v4 Web Chat is built in React, is more robust and full-featured, is fully compatible with the v3 and v4 Bot Framework SDKs, and is fully supported (learn more about it here).
That being said, if you are intent on using v3, then you should use this provided sample that is React based and ready to integrate.
Hope of help!
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.