how can I run an exisiting project in react - reactjs

I am new in react, and now I have an available project which is needed some kind of development. The whole project consists of app and build folder and both of them also have index.html file and some other staff. How can I launch this project for viewing its demo in linux?could anyone explain the process step by step?
thanks in advance

Approach 1: Via Node
Install Node Install Node on linux machine
Once successfully installed, go to project folder and run npm install to install dependencies.
Run command "npm start" or in background "nohup npm start &" will start default application on 3000 port, from browser check http://IP/domain name:3000
Approach 2 Via Yarn
Install Yarn on linux machine Install Yarn
from project folder run yarn install will install all dependencies.
run yarn build will create complied code in /build folder
Install apache or Ngnix and move build folder content to apache or ngnix web root folder
Access app from http://IP or domain name if seted up for ip.

Related

How to give next js app build to the client

I am new on Next JS, I have created a small application. It is using API calls and more features.
During development, Using the command as npm run build I am able to create .next folder as build and using npm run start I am able to run that build.
Now the client is asking for build, so what should I send to him? Either complete project and ask him to do the
npm run build and npm run start (which I don't think so)
or only the .next folder. But how he will run this build?
Open package.json in your editor and add the following export script to the file:
"export": "npm run build && next export -o _static"
run this code in the terminal:
npm run export
Open _static folder and there is all of your file.
Some possible ways of sharing your project:
You can easily build and host your project with services like vercel or netlify. Easy and quick. Check out the vercel CLI in particular.
Your client can clone the git repo, install all dependencies, run build, and run start. This'll start a production server. Check here: https://nextjs.org/docs/api-reference/cli#production. Bad idea if your client is not a dev.
You can build your project and send the output to your client, which he/she can then view by spinning up a server (python simpleHTTPServer, Mamp). Also a bad idea if your client is not a dev.
Long story short, host your project somewhere and send them a production URL.

How do I resolve the error that occurred when migrating a windows local reactjs application to Linux?

I'm trying to migrate on linux centos8 an application in reactjs that runs well locally in w10 with localhost:3000 for react and localhost:3001 for nodejs.
I created in /home a folder for node in which I copied everything in the local node folder, except node_modules, I ran there npm install, I launched nodejs with the command node index.js, I tested some endpoints from postman, everything it's ok on the node side.
I created in /home a folder for the reactjs application, I copied everything in the local react folder except node_modules, I gave npm install, node_modules was created.
Then I give the command: npm start and get the error:
Failed to compile.
./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Error: No valid exports main found for '/home/parcare-react-test/node_modules/colorette'
and the reacjs does not start.
What can I do?
Thanks,
Does /home/paracre-react-test/node_modules/colorette exist?
My hunch is that it's installed globally (outside the project) on the original machine.
Run npm ls -g colorette to see if that package is installed globally, and npm ls colorette from the app directory to see if it's installed locally.
If it's global on the original machine, you can install it on the destination machine with npm i -g colorette (or whatever the parent package name is if it's a dependency of something else.)
If that's the issue and you don't want to install it globally on the destination machine, just install it into the app dir with npm i -D colorette. (I'm assuming it's a devDependency. If I'm wrong about that omit the -D.)

No `package.json` file found. Make sure you are running the command in a Node.js project

I am building a AngularJS file with typescript and installed tsd for typedefinitions globally. When I try to run the following command on the root of my project folder I am getting an error
I am new Angular JS using version 1.7. I am not sure if Package.json is needed for AngularJS project
Command
tsd install angular --resolve --save
Error
No package.json file found. Make sure you are running the command in a Node.js project.
package.json is required for node projects to specify metadata about project and include some important commands that may be required for the project build. First you have to install node from official website. You can google for the step by step installation. Once installed, goto your project directory and run this command. Make sure to perform "npm init" before you run the desired angular command.
Note: Ensure, node is accessible through cli
tsd is deprecated use #types node modules
npm i #types/angular --save

How to run create-react-app build version

I have created a test React application and I started it with the create-react-app. I am starting it with with yarn start, but that starts the debug version of the application. I did npm run build and it created the build folder, however when I do yarn start from the /build folder, it still starts the debug version of the application. I need this for testing performance with the optimized version. How can I solve this?
You can actually use static server to run build version of your app. It's doable with serve. You can test it with:
npm run build
npx serve -s build
Navigate inside the directory of your app first.
According to the official create-react-app website. When you run npm run build or yarn build you create a build directory with a production build of your app.
After running the command above the next thing you can do to check the build version of your app is to install serve to serve your static site on the port 5000 by default.
npm install -g serve
serve -s build
This will copy the link to your clipboard that you can paste in your browser and see the build version of your app.
You're trying to move from a development build to a production build with create-react-app you need to deploy it using a web server, I would recommend using Heroku or a droplet or you can use Netlify which has a simple set up procedure using the below commands:
cd project-name
npm run build
npm install netlify-cli -g
netlify deploy
Follow command line prompts and choose yes for new project and ./build
as your deploy folder and voila you have a production React app!
You can host the app locally using apache, nginx, express
If you want to run your app in browser with build files served locally from the filesystem (i.e., without a web server), you can put this in your package.json:
"homepage": ".",
Now
build your app with npm run build.
launch <your app>/build/index.html in the browser.
Note: This solution is not suggested if your app (or some routing library) is using the HTML5 pushState history API. https://facebook.github.io/create-react-app/docs/deployment#serving-apps-with-client-side-routing

npm install connect issue

I am new to node.js. I have been undergoing Angular.js Pro by Adam Freeman
As per the installation step:
I need to setup the web server for angular.js application using nodejs.
Accordingly i installed node.js version 6.11.0 in the path:
C:\Program Files\nodejs
Next step is to install connect module of nodejs using the command npm install connect.
I am getting the below error message when doing so.
shell output here
Can please anybody help with this.
You don't have to do that in the node.js path.
You can head over to a new directory say ~/desktop/temp
And then first do npm init, which would set the project to use npm. It would ask a couple of questions.
Post this, do npm install connect
Well, you need to start clean in an empty folder of your choice. This will be your project folder.
cd into it, then run npm init
Now you're ready to npm install whatever packages you need.

Resources