Develop Reference

How to create-next-app using version 12 instead of version 13

I am going to follow a new course in udemy and it is about creating a website with react. https://www.udemy.com/course/build-the-best-ecommerce-website-ever-with-react-js-next-js/ that is the course. The problem is, instructor is using Next.js version 12 and when I create a next.js now it will create with 13.1 version but there is drastic differences. How can I overcome this ? and is it possible to use yarn while doing it from terminal.
I looked to documentation but couldn't find a guide about this and I thought that just doing it from package.json would create problems later so I don't know what to do .

It's possible to setup Next.js version 12 manually:
# init the package.json
npm init
# intall next dependencies
npm install next#12.3.2 react react-dom
// edit your package.json with next scripts
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
# create the file structure
.
├── package.json
├── pages
│ ├── index.js
// init your index.js
import React from "react";
function index() {
return <div>Hello world</div>;
}
export default index;
# start next
npm run dev

If you want to create a Next.js app using a specific version of React (such as version 12.1 instead of the latest version), you can follow these steps:
First, you need to install a specific version of Next.js that is compatible with the React version you want to use. You can do this by running the following command in your terminal:
npx create-next-app#latest my-app --use-npm --example "https://github.com/vercel/next-learn-starter/tree/lesson-01"
In this command, my-app is the name of your app, and --example specifies the example project you want to use as a starting point. You can replace the URL with any other Next.js example project that is compatible with version 12.1 of React.
Once the installation is complete, navigate to your app directory:
cd my-app
In your app directory, open the package.json file and find the dependencies section. Look for the line that specifies the version of React that is being used. It should look something like this:
"react": "^13.0.0",
Change the version number to 12.1.0, like this:
"react": "^12.1.0",
Save the changes to the package.json file and run the following command to install the specific version of React:
npm install
This will install version 12.1.0 of React and any other dependencies that are required by your app.
5.Finally, you can start your app by running:
npm run dev
This will start a local development server and open your app in a web browser. You can now start building your app with version 12.1.0 of React.

Deploying Node Application

I am using NestJS and IIS, and I have deployed my dist folder on server through IIS with the help of IISNode, but when I run it, it gives me an error of 'module not found #nestjs/core' etc, so I installed entire package.json files (node_module) on server, after this it start working fine. But I have a question.
Do we have to keep node_modules folder on the server which is of 250MB+?
Do we have any other alternative by which dist will contain all the required code of node_modules just like an Angular application?

This is not NestJS related, but it is related to NodeJS itself. A typical package.json file looks like this:
{
"name": "nest-typescript-starter",
"version": "1.0.0",
"description": "Nest TypeScript starter repository",
"license": "MIT",
"scripts": {
// ...
},
"dependencies": {
"#nestjs/common": "8.2.3",
// ...
},
"devDependencies": {
"#nestjs/cli": "8.1.7",
// ...
}
}
Everything under dependencies are required at runtime, since they're being used by your application. Anything under devDependencies are only required during development, for various reasons.
It is common to have devDependencies like type modules, testing tools, and others.
While installing a new dependency, you have two options:
# Option 1
npm install <dependency name>
# Option 2
npm install --save-dev <dependency name>
If you provide the --save-dev flag you would install that dependency under devDependencies.
After making your package.json file organized, separating devDependencies from dependencies you can deploy your application properly. During the deployment process, instead of running npm install you can use:
npm install --omit=dev
By doing so, you would only install runtime dependencies to your node_modules.
Finally, you can copy that node_modules to your container (or whatever you're using to deploy) and ship the application.

Can (and should) I use Lerna without publishing to NPM?

I have an app and I have a storybook. They both live inside the same app at the moment. I have just installed Lerna and played around so I can treat them both as 2 separate packages.
Both packages will be dockerised and when I build one, it should not do anything with the other
my structure so far:
app/
package.json
lerna.json
makefile
packages/
my-app/
all-relevant-packages-for-my-app
package.json
storybook/
all-relevant-packages-for-storybook
package.json
I don't want to publish anything to NPM. I simply want to use these packages separately but I would like to import app components into the storybook
is Lerna the correct thing to use here?
when I run say docker build my-app it should go inside the my-app repo and then build the docker image etc, run tests and deploy my app to S3 (this is all set up already) but now I've moved it all I'm wondering if Lerna is the correct tool as I see lots about publishing to NPM

You don't have to use Lerna in your case. I'd recommend you to use Yarn Workspaces. Let's install yarn and then add
"workspaces": [
"packages/*"
],
section to your main package.json file. From now on, yarn will be handling packages dependencies.
In your case - please enter the package.json of my-app and change its name to e.g. `#app/my-app'. Check the version of my-app in package.json (I will assume its 1.0.0 for now).
Do the same with storybook changing its name to e.g. #app/storybook. Then you can add a dependency in storybook's package.json file:
"dependencies": {
"#app/my-app": "1.0.0"
...
}
Go back to the root directory app and run yarn command. It will resolve all dependencies for all packages. Now you can use my-app inside storybook without the necessity of using Lerna.

do I have to install npm for every new project?

I have NPM installed in my PC how to use it for a new project?
or do I have to install npm for every new project?

NPM is extremely useful, but, when you install it, you install it globally. It comes with Node JS, so when you install Node JS, you should have npm installed(type npm -v to see the version and whether npm is installed).
"npm init" creates a package.json for your folder, which contains all the information about the version number, the name of the project, and some other information. In package.json, you can add dependencies, which basically say your project relies on that npm package.
"npm install" will install all the packages specified in package.json, and, if you want to install something specific, you would type "npm install ".

Npm module not found

I'm running an Angular app built with Grunt and using Bower and NPM.
I tried installing my npm module locally. The files are in the main app directory in node_modules folder.
The module docs ask me to load the module with <script type="text/javascript" src="node_modules/moment/moment.js"></script>, but I get 404.
Am I missing something? Do I have to tell Grunt that I want these NPM modules?

Can you provide more information on what your app is built with? If node serves your app, you need to make the directory you link to public. Assuming you're using express, this would look something like this in your app.js file:
app.use('/node_modules', express.static(__dirname + '/node_modules/moment/moment.js'));
Edit:
Or if you just want to make it work, try to load moment.js from CDN like this:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
Link to moment on CDN

Basically, npm is the package manager for all the javaScript frameworks such as Nodejs, angularjs etc. npm should be installed globally in the machine.You can install it from https://nodejs.org/en/ .
Next,you need check for the package.json file in your project.
If there is a package.json already existing in your project folder, then from command line you need to go to your project folder and type npm start.
If package.json file does not exist, then in the command line type npm init,then there will be a package.jsonfile created in your project folder.Then edit the package.json . and add the node packages into the package.json as similar way to this
{
"name": "shoppingkart",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www" //If you have any scripts.
},
"dependencies": {
"mongoose": "^4.9.0", // here you should have all your node_modules listed
"passport": "^0.3.2",
"stripe": "^4.15.1"
}
}
if you are not able to add the dependencies to json file, there is also another way to do it.
just go to your project directory in the command line and type
npm install --save grunt // And you need to do for all the node_modules, by replacing the **grunt**.
Automatically the dependency will be added to your package.json file.

If you installed your npm packages locally then your node_modules folder should found at the root of your project.
If you installed all your packages globally you may not see an npm_modules folder in your project.
To see where your global modules are located you can run
npm list -g

I faced the same issue just install the package globally and save at the end.
Like:
npm install -g <package> --save
Even the above doesn't work then use -f / --force at the end to force install.