I am learning MERN and starting of the backend section I learned that we have to enable ESM in package.JSON to use import and export but in building frontend with react nothing has to be done
React itself doesn't care.
Whether you do or don't need to configure anything depends on the tools you use for your frontend development.
Eg. create-react-app and Vite configure the bundlers they use to work with ESM, but if you start from scratch, with e.g. your own Webpack configuration, you'll need to figure out the configuration yourself.
Related
This may be a dumb question, but is the default react app (created using npm create-react-app my-app) using node.js? I am confused because in my web development class at university, I had to download node.js to create react applications. However, I didn't have to do anything like creating a server or initiating a node.js file, which is described in w3school's node.js tutorial. Because of this, I found out that I don't even really know what node is used for, besides downloading packages like redux and whatnot.
create-react-app uses node.js for all of its dev tooling. Likewise, a lot of the tools you'll use in the React ecosystem (like webpack, prettier, npm), all run on top of node.js as well).
You'll most probably build your react app to a static file, in which case the production output will not require node.js, it will be html and javascript assets that can be served directly to a client.
Hope that helps! Let me know if you have other specific questions
Node.js is used for server-side while React.js is for the front-end part. So, no, you don't need Node.js.
Under development mode, yes. Create react app runs NodeJs with Webpack Dev Server to allow you get feedback when modifing files, start or stop the server.
Hi I'm developing a project and for some reasons I am not able to use any webpack and node modules. I also cannot use any cdn. The vue project will only contain client side components. I don't have to consider the backend part, routing etc. The size of the project matters so I am not allowed to use node modules. How can I create a client-side only vue project without node modules and npm?
You can download Vue.js and use it locally in a project.
Development version (with debug mode and all warnings).
Production version (no warnings no debug)
After that you can just add it via a script tag:
<script src="your-vue-directory/vue.js"></script>
And you ready to go.
According to docs you can use CDN
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
I am developing an application with node.js and express.js hosted on firebase using firebase functions, and development in typescript. I would like to use react.js as client side framework. I set up node + express + firebase using:
firebase init hosting
firebase init functions
However, there is no obvious way to set up react front end framework using create-react-app ... given the current project setup. In particular, create-react-app seem to create its own node_module and index.js. I found this: https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0
It is a bit ad-hoc. In particular, it is launching a dev server using yarn, but I am using firebase serve ..., and would like to keep it that way. Do these different frameworks play together at all? #webDev
You can definitely use React and Firebase together, but merging the complex templates generated by starter kits for each may be more trouble than it's worth.
You will likely need to pick which generated template gives you the most value (whether it be from firebase init hosting or create-react-app) and then work on standing up items from the non-chosen ones piece by piece.
If you really want to use firebase serve you will be losing hot-reload and other development time benefits that create-react-app provides, as firebase serve internally uses superstatic (repo) which is a dev server for hosting static files.
You can use React with such a setup by npm install --save react react-dom and then using React as normal, but it's very likely that you will want a toolchain between your source and the static files that firebase serve serves (given your use of the typescript tag, I'm assuming you at least need to transpile .ts to .js), and you will then need to set that up on your own if you simply want to use firebase-serve.
In my opinion, the dev toolchain that you get through create-react-app will provide more immediate value for your specific situation than wanting to stick with firebase serve. Is there any specific reason you feel glued to firebase serve?
(Not using firebase serve in no way causes issues running firebase deploy --only hosting later when you want to deploy to firebase hosting, as long as your hosting config points to the directory where npm run build outputs your built files.)
I'm new to Node.js web development. Just created a project using ExpressGenerator (project structure generator for ExpressJS framework).
The question is: if I want to use FineUploader front-end JS library for my application, which is provided through NPM package, how should I embed it into my project properly? package.json manages server-side dependencies. When authors of front-end module publish it as npm, what approach to further usage they imply? Another package manager like Bower?
You are correct that package.json manages server-side dependencies but not entirely. You can - and should - rely on it to manage front-end dependencies as well.
For that to work you will need a module bundler, to package the node module for the browser. Some of the most popular bundlers for accomplishing this include Webpack, browserify, rollup among others.
Also note that you can delegate the bundling of node js modules to cdn services such as unpkg or wzrd so that all you need to do to use a node module in your front end code is include a link in your html to the cdn bundled module
I would like to start using advanced JS features in an pre-existing app with a NodeJS serverside, React using the Fluxible architecture, Gulp task runner and Broserify/CommonJS front end modules.
Anybody who has been down that path or a similar path before and wants to share some insight I would much appreciate it.
babel-node compiles on-the-fly. You can use the API (babel-core) to pre-compile and then run the compiled output in node. There's also a gulp-babel plugin. At the expense of extra processing overhead at build time you could hijack browserify or use module-deps to figure out the dependency graph for you, if relevant. There's a notion of adding a feature to Babel to generate a dependency graph, but it's not available currently.