Has anyone gotten jsdom working in a production react build purely for the frontend (browser)?
Background Info
I got jsdom working for a create-react-app in a dev environment. It's being used to parse an html output that the user creates through a Richtext editor.
Issue
The app is not able to be built for production due to whatwg-url failing since it requires ES6 syntax for Object.defineProperty to work.
Hoping to avoid creating my own regexp's for selecting these html nodes.
Replication:
npx create-react-app my-app; cd my app; npm i jsdom;
Make a file that calls new jsdom and parses a html string
Run npm run build notice the app fails.
Answering this myself. Short answer, do not use it. There is something called DOMParser which does something similar to JSDom.
Related
I've created very basic react project with create-react-app command and wish to run in codepen
I did below settings under JS
To run project locally I use command npm run, how to achieve that in codepen ?
create-react-app compiles all the code into one or many javascript files. You cannot do that in codepen.
You can use codepen with pre-compiled react files but you won't get what you would expect from create-react-app.
See this Hello World example:
https://reactjs.org/redirect-to-codepen/hello-world
There are other sites like glitch.me, codesandbox.io where you can clone the repo of create-react-app and use the node environment.
We already know that Storybook is for building UI components and keeping them isolated from the business logic. I have implemented some basic examples of StoryBook.
Now I am very curious to know about the Storybook internal behavior means how it interacts with the react main application, the workflow of the Storybook after executing the npm run storybook command starting from the entry point to exit?
I'd also like to know why we don't use npm start for running the storybook?
Thanks :)
Storybook doesn't interact with your react application.
It is just a library for components in your project.
It gives you a variety set of tools to create examples of components usage.
This is why you need to write stories separately from actual react application.
And all these stories have no any intersection with your app.
Command npm run storybook just build all the stories that you've written and build useful ui for that so you can browse them easily.
That becomes extremely useful when you have a big code base.
Because it is difficult to know every component you have in project and how it works.
And Storybook provides us with an instrument to have all components more structured.
You can also use npm start for that. It is just about how you configure scripts in package.json.
Storybook doesn't interact with the main React Application.
Storybook is only used for building UI components and keeping them isolated from the react application(business logic). These components can be easily visualized when you run the storybook through this npm run storybook (windows) or yarn storybook(mac/ubuntu) command. It runs on a different port unlike npm start runs on the 3000 port by default.
These components are then imported into the main react application. React will use these components based on the requirement. Storybook gives you the ability to browse all the UI components that you have built and then later react will use it. This allows you to develop one component at a time.
What will happen when you execute the command npm run storybook?
This command at first will search for main.js and if found it will look for all the file which extends with stories.js which is nothing but the stories that you have built. It will then create a list of stories in any order or specified order which will be shown in the storybook webpage at 6006 port by default.
Why we don't use npm start for running the storybook?
We can use npm start for running the storybook but you need to configure it in the package.json file under the "scripts" as shown below.
"scripts": {
"start": "start-storybook -p 6006 -s public"
}
Here public means that this storybook doesn't require any authentication for running it. Now if you do npm start it will only run the storybook for you, not the react application. This storybook can be used later in different react applications.
I'll recommend that if you are implementing some basic concept of storybook then it is better to run both separately on a different port.
I have created a react project using Create-React-App and now would like generate the production build. When I use npm run build I am getting the error:
Failed to minify the code from this file:
./node_modules/pify/index.js:3
Create-React-App suggests the following corses of action:
To resolve this:
Open an issue on the dependency's issue tracker and ask that the package be published pre-compiled.
Fork the package and publish a corrected version yourself.
If the dependency is small enough, copy it to your src/ folder and treat it as application code.
will take to long and seems to already be a issue (#50) raised for pify.
I am not sure how I would approach but I think it may be the best option
is not going to work because it is a dependency of a different package.
What I am looking for is come guidance on how to solve this solution before I use option 2 and rewrite a whole package.
I belive the solution would involve ejecting from create-react-app and messing with the webpack config file.
I am trying to setup an server rending react using react-router-4. While it works just fine on the front-end side (Webpack). It appears that preact-compat is not working when used in the server side. I am using babel-register so transpile the code.
I have a branch here for reference:
https://github.com/abarcenas29/preact-sandbox-v0/tree/wip/isomorphic-react
to run:
yarn run install
yarn run start:prod
go to localhost:3100
Using Babel to alias a dependency doesn't make sense, because Babel does not run on your dependencies (in node_modules). Use something like module-alias instead.
Full answer to the same question is on Github: https://github.com/developit/preact-compat/issues/390#issuecomment-304334947
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.