Should react and react-dom be devDependecies? - node.js

I use webpack to bundle all files for production on the web. Since no code runs on node during production, thus no package being required in production, should all dependencies be development only?
I don't want an answer based on opinions or best practices or intended usage, I simply want what makes sense.

It seems the only answer you will get to this question will be "based on opinions or best practices or intended usage". For those who were not looking for such answers, the answer is:
If there is no backend service in the same project where you are making the frontend app via a bundler, then put everything in devDependecies; otherwise only put the packages you will require in some node.js related code in dependencies.

Related

Packaging a Node app from development to production

Apologies for the broad scope of the question and if there is a better sub for this question please let me know.
So my requirement is that we want to make sure that the Node app that is developed by the dev team goes through testing, QA, and production without any changes, very deterministically.
The strategy is simple:
Package the Node app and digitally sign it. This package will go through testing, QA, and production.
One of the requirements of this strategy is that when we go to the production server, we do not want to do npm install.
[Pkg][1] seemed to be the silver bullet until I found out it has trouble packaging the BigNumber library.
The other alternative seemed was doing npm pack. However, I found out that when I do npm install package.tgz it actually downloaded from the internet, and not actually package everything in it.
So I would like to ask for advice on how we can move a Node app from dev to production guaranteeing that we deploy the exact same package/binary that was built originally.
I understand Docker is the obvious choice, but we are trying to find out other ways that going down the Docker route.
Thank you very much.

Why we have to install NodeJS for ReactJS

I'm a beginner in ReactJS also for NodeJS. I would love to know why we have to install NodeJS run ReactJS application as ReactJS is client-side scripting.
The other answer is incorrect.
You don't NEED Node.js, in fact you could create a project without running a single npm command. Just follow this guide.
The main reason, as pointed out in the article, is:
Easy package management. This means you can upgrade the package easily later on
JSX is the templating language that makes it way easier to write components: <h1>Hello Word</h1> reads so much better than React.createElement('h1', null, 'Hello World')
Managing module imports, as opposed to having global variables around everywhere, it's great to have encapsulation and import modules as needed.
Build step and workflow. For a modern project, you will need tools to minify your code, cache busting, transpiling (writing pure javascript for old browser is a pain and you really shouldn't do it manually), the list goes on and on.
Because almost all the JavaScript libraries/frameworks are using the Node Package Manager (NPM), that makes much more convenient to manage JavaScript dependencies in general, both client-side and server-side.
Edit: It's not really technically necessary, but using a package manager is the best practice for managing dependencies and sub-dependencies.
Of course, you don't have to. When you are in the development step, you can install it for package management. Only webpack is needed to bundle, compile, transpile the code.

What's the lightest way to automate .vue file compilation without webpack?

I'm working on a web application that currently uses vuejs for part of its interface. The back-end is NOT in Node, so there is currently no package.json file or any tool from the typical npm stack in this repository.
We already have a bunch of non-npm dependencies that need to be installed in order to use the repository, so my coworkers aren't too open about the idea of adding another layer of complexity. I can't blame them for that, it's the reason why I use npm scripts and not even gulp in my other projects. I'm tired of spending hours learning and configuring build tools that never end up doing what I want anyway.
But since the vue-cli tool no longer includes the build command, I'm a bit stuck. Is there really no more CLI app to build vue files at all? And if so, what would be the smart way to use vue without webpack? Template strings are not maintainable at all, and <script type="text/x-template"> don't work when you want to use multiple components from multiple files in the same page.
I realize your question says 'without webpack' but you may be interested in backpack - a CLI app i came across for building Vue.js without requiring you to write any configuration code. It is basically webpack preconfigured as a minimalistic build system for Node.js. It provides two commands, dev for live reload enabled development and build for building you project.

Yeoman and ExpressJS

I want to know if there is some boilerplate code to use a frontend workflow tool like Yeoman with a backend framework like ExpressJS, if I want to maintain the same codebase for both the front and back ends.
Basically I want to know -
How do the boilerplate code produced by yeoman and express fit in together. Is there a way to integrate the two? (How does the gruntfile fit into the express project)
Can I substitute yeoman's default watch with an express server which reloads pages on update?
Yeoman is currently focused on front-end app development, but we're going to explore back-end integration in the future.
No, actually there isn't any right now.
But you can combine express.js with the component package manager. There is some work left, and you cant use yeoman components in component.
To answer your questions
You can look for components in the component repo that you have used in yeoman. Not the same, but might be a solution.
Use the module supervisor for this. You can get it via npm
I haven't found an easy way of integrating my own Express + H5BP + Angular + Grunt skeletons into Yeoman, and eventually just settled for creating a repo here: https://github.com/ericclemmons/genesis-skeleton
From what I've read, there are projects underway to add express generators, but eventually stacks are going to get complex enough to where you'll have to maintain your own starter app, rather than generating it.
There's an experimental branch with yeoman + express.js G+ Yeoman/Express Article
I found yeoman.js to be very cool for rapid prototyping but does require some ramping up to get used to the various tools it's "opinionated" about. I've decided to go over each of the core tools in some vids that are hopefully helpful: yeoman.js related videos
Yoeman fullstack generator now generates both front end and back end. Other interesting frameworks which do the same are Sails JS and StrongLoop
It is worth noting there is an express-generator project:
official docs
npm page
I am going to give it a go - because I'm folling this tutorial - but other than that I cant comment on its value.

Is it best practice to use package.json in an app that is not a module but an end product?

Is it normal or hopefully best practice to use package.json in my project even though my project isn't a module/package? I'm currently using package.json for info, version, dep management and I include use 'private: true'
Many people are using package.json in applications these days. npm is still a great way to manage your dependencies while developing. As mentioned there are a few ways to ensure that your app doesn't get pushed to the public repository. And you still get the benefits of all the npm utilities.
If by "best practice" you're asking if there is a good reason not to do this, the answer is no. You should go for it.

Resources