We Keep Coding

Trouble with running a react + next.js project

I'd like to fork this repository and run it on my local server:
https://github.com/carbon-app/carbon.git
I am familiar with React but new to Next.js. The scripts in the package.json are specified as follows:
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
How can I run this as a React project using npm? I'm interested in the React part to recreate another app using this app's frontend.
Please help me to run as a react project.

first, you should install dependencies:
npm i
then run next js in development mode using:
npm run dev
for more details, visit Next.js docs

What is --openssl-legacy-provider in Node.js v17?

I was building a simple React app using Tailwind. I used create-react-app and then installed tailwind. I have done this many times before.
In order to install Tailwind, I also had to install craco and change package.json "scripts" to use craco, like so:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
However, this time, when I ran npm start, I got an error that I had never encountered before:
Error: error:0308010C:digital envelope routines::unsupported
So I searched on StackOverflow and someone suggested adding --openssl-legacy-provider to my "start" script like this:
"scripts": {
"start": "craco --openssl-legacy-provider start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
And it's working now. But can somebody please explain to me what --openssl-legacy-provider actually is and how it works?

Due to changes on Node.js v17, --openssl-legacy-provider was added for handling key size on OpenSSL v3.
You somehow have installed the latest version of node.
Restore your previous version of nodejs.
Go and manually remove the node dependency(e.g. "node":17.4.3) from package.json
and packagelock.json.
Delete node_modules folder and use npm install to reinstall node_modules.

I have seen many answers regarding the OpenSSL issue that people encounter due to the changes on Node.js v17. Personally, I encountered the problem in a vue.js/electron application after switching to my new MacBook with M1 chip.
This GitHub issue lists multiple options that worked for different users.
In my scenario, adjusting the script commands in the package.json file worked:
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
I've seen user replacing th export with a run command.
Keep in mind that the syntax might differ on another Os. For example:
Set and set
The full issue with all possible answers.

Adding --openssl-legacy-provider in package.json sure works, but if you don't want to use the legacy SSL provider, you can upgrade your webpack- and react-scripts versions.
I had to first delete package_lock.json and node_modules/. Then I ran:
npm install --save-dev webpack#5.74.0 --legacy-peer-deps
npm install --save-dev react-scripts#5.0.1 --legacy-peer-deps
npm install --legacy-peer-deps
After this, I tested with:
npm start
I also had to fix a few other issues, but eventually got it working.

I have found a solution in this GitHub issue
and it works for my case.
For Node.js v17+, you need to put the openssl-legacy-provider flag after your command, for example:
From npm --openssl-legacy-provider start to npm start --openssl-legacy-provider start
From npm --openssl-legacy-provider build to npm start --openssl-legacy-provider build
... and so on.

I had this error in Nuxt 2.15
I fixed the error in the following way.
package.json edit
I had Ubuntu so this method worked for me
"scripts":{
"dev":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
My partner had Windows but the above method didn't work on it, then this method worked
"scripts":{
"dev":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
The most interesting thing was that it worked in other ways in Ubuntu and Windows

Build script of package.json

I have the below folder structure
-src
--module
---some.js
---another.js
--server.js
I am using parceljs transpile the .js files
The script in package.json looks like this
"build": "parcel src/*/*.js --target=node"
When I run npm run build, server.js is not transpiled.
If I change the build script to the below, files in module folder don't get transpiled
"build": "parcel src/*.js --target=node"
Any guidance so what I could transpile .js files in the src level as well as all nested files?

You could run the both commands in a single line, using the logical operator &&:
"build": "parcel src/*.js --target=node && parcel src/*/*.js --target=node"

as per #Jeremy' suggestion
parcel src/**/*.js --target=node

How to Build NextJS Project on Local without Now

I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......

After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.

You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.

Where to put webpack.config.js in React project?

I obtained already existing React project and I'm supposed to continue with it.I never used React before. I need to use web worker in the project - there's a project that suits my needs: Worker Loader
The suggest one adds this to their webpack.config.js:
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
Then use worker like this:
import Worker from './file.worker.js';
const worker = new Worker();
But even though I can see that my React project uses webpack and babel o the background, there is no .babelrc or webpack.config.js in the project. This is how I run the project:
npm start
That actually runs react-scripts start based on what I see on package.json:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
Neither webpack nor babel are in package.json dependencies, so I really have no idea how are they run by React. I would really appreciate if someone explained to me how does it work and how to configure webpack to use worker loader.

You need to run npm run eject first.
This command will copy all of your configuration files into your project(including webpack.config.js). However, run this command only if you MUST because although you will have full control over your configuration, you'll be on your own. React won't manage the configuration for you anymore.

Not sure 100%, but I think this app was created using react starter kit called Create React App and it comes with a package called react-scripts which is a wrapper around the build tools -- webpack being one of them. So lookup that stuff in npm. It might be all taken care of for you
Also, see what you have under node_modules directory --i am guessing it's all there