How to host a reactJS application - reactjs

I am assuming I should be able to deploy my reactJS to an S3 instance on AWS but I do not know how to do this. I found publish-react-app on github and I am trying to follow those steps. When I execute npm run build I get this error stream:
c:\jrs\PM_01\React>npm run build
npm ERR! missing script: build
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jonat\AppData\Roaming\npm-cache\_logs\2018-09-05T18_57_19_811Z-debug.log
c:\jrs\PM_01\React>npm run build
> sample-app#1.0.0 build c:\jrs\PM_01\React
> react-scripts build
'react-scripts' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! sample-app#1.0.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the sample-app#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\jonat\AppData\Roaming\npm-cache\_logs\2018-09-05T19_06_24_048Z-debug.log
I have no idea what I need to put into the scrips section of my package.json file. This is what my package.json file looks like:
{
"name": "sample-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.0.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^1.0.0",
"style-loader": "^0.21.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"cors": "^2.8.4",
"ebay-node-api": "^2.2.1",
"moment": "^2.20.1",
"moment-timezone": "^0.5.14",
"publish-react-app": "^1.0.1",
"react": "^15.6.2",
"react-barcode": "^1.3.4",
"react-dom": "^15.6.2",
"react-moment": "^0.7.0",
"react-redux": "^5.0.5",
"react-router-dom": "^4.1.1",
"redux": "^3.7.0",
"reselect": "^3.0.1",
"simple-flexbox": "^1.2.0"
},
"babel": {
"presets": [
[
"es2015",
{
"modules": false
}
],
"stage-2",
"react"
]
}
}
I created a free tier S3 on AWS and created a user and a bucket but I really dont know what else to do in order to get my application deployed.
Thanks.

Your package.json is missing the key build. Generally with tools such as create-react-app it comes with a build script to prepare assets for production. As for hosting, Heroku is pretty easy to get up and running quickly.

Related

How to solve chromium and certificate error while doing npm i

I have cloned the project from github and trying to run the react project in VS code.
I ran npm i and also tried npm i --force.
This is the log
npm WARN deprecated core-js#2.6.12: core-js#<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path C:\Users\55393\Desktop\Rapidx_Documentation\website\node_modules\puppeteer
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! ERROR: Failed to download Chromium r722234! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.
npm ERR! Error: self signed certificate in certificate chain
npm ERR! at TLSSocket.onConnectSecure (_tls_wrap.js:1497:34)
npm ERR! at TLSSocket.emit (events.js:315:20)
How to solve this?
I have attached package.json below
{
"scripts": {
"examples": "docusaurus-examples",
"start": "docusaurus start",
"build": "docusaurus build",
"serve": "docusaurus serve",
"publish-gh-pages": "docusaurus-publish",
"write-translations": "docusaurus-write-translations",
"version": "docusaurus-version",
"rename-version": "docusaurus-rename-version",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"docusaurus": "docusaurus"
},
"engines": {
"node": "v17.6.0"
},
"dependencies": {
"#azure/msal-browser": "^2.28.0",
"#azure/msal-react": "^1.4.4",
"#docusaurus/core": "^2.0.0-rc.1",
"#docusaurus/plugin-client-redirects": "^2.1.0",
"#docusaurus/plugin-content-docs": "^2.0.0-rc.1",
"#docusaurus/preset-classic": "^2.0.0-rc.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#mui/material": "^5.10.3",
"axios": "^0.27.2",
"bootstrap": "^5.1.3",
"chart.js": "^3.8.0",
"clsx": "^1.1.1",
"docker": "^1.0.0",
"docusaurus": "^1.14.7",
"docusaurus-lunr-search": "^2.1.15",
"docusaurus-pdf": "^1.2.0",
"docusaurus2-dotenv": "^1.4.0",
"env-cmd": "^10.1.0",
"jquery": "^3.6.0",
"moment": "^2.29.4",
"react": "^17.0.2",
"react-bootstrap": "^2.4.0",
"react-chartjs-2": "^4.3.1",
"react-dom": "^17.0.2",
"react-icons": "^4.4.0",
"react-markdown-editor-lite": "^1.3.2",
"react-paginate": "^8.1.3",
"react-player": "^2.10.1",
"react-scripts": "^5.0.1"
},
"devDependencies": {
"dotenv": "^16.0.2"
}
}

In react native #react-navigation/native-stack error occured

I was trying to input 'npm install #react-navigation/native-stack' In my vscode's terminal to install #react-navigation/native-stack but during installing, error occured.
The following is error message.
npm ERR! code 128
npm ERR! An unknown git error occurred
npm ERR! command git --no-replace-objects ls-remote ssh://git#github.com/react-navigation/native-stack.git
npm ERR! ERROR: Repository not found.
npm ERR! fatal: Could not read from remote repository.
npm ERR!
npm ERR! Please make sure you have the correct access rights
npm ERR! and the repository exists.
npm ERR! A complete log of this run can be found in:
npm ERR! path(my log files path)
my package.json file
{
"name": "userinterface",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web"
},
"dependencies": {
"#react-navigation/native": "^6.0.13",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-screens": "~3.15.0",
"react-native-safe-area-context": "4.3.1",
"undefined": "react-navigation/native-stack"
},
"devDependencies": {
"#babel/core": "^7.12.9"
},
"private": true
}
I'm newbie for react-native and programming. so I don't know what to upload here. if you need more information to solve this problem, I will upload that.
It could be a compatibility issue. Try running
npm install npm#latest -g
and check again
I think there was a mistake in your package.json. It should be a package name following it's version. In this case it's should be
"dependencies": {
"#react-navigation/native": "^6.0.13",
"expo": "~46.0.9",
"expo-status-bar": "~1.4.0",
"react": "18.0.0",
"react-native": "0.69.5",
"react-native-screens": "~3.15.0",
"react-native-safe-area-context": "4.3.1",
"react-navigation/native-stack": "^6.9.0"
},

React App dependency conflict with webpack-server

npm WARN config global --global, --local are deprecated. Use
--location=global instead. npm ERR! code ERESOLVE npm ERR!
webpack-server#"^0.1.2" from the root project npm ERR! npm ERR! Fix
the upstream dependency conflict, or retry npm ERR! this command with
--force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See
C:\Users\Emre Kızıltoprak\AppData\Local\npm-cache\eresolve-report.txt
for a full report.
Package json:
"dependencies": {
"#babel/core": "^7.18.9",
"#babel/plugin-transform-runtime": "^7.18.9",
"#babel/preset-env": "^7.18.9",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"node-sass": "^7.0.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"sass-loader": "^13.0.2",
"style-loader": "^3.3.1",
"webpack": "^5.73.0",
"webpack-dev-server": "^4.9.3",
"webpack-server": "^0.1.2"
},
"devDependencies": {
"webpack-cli": "^4.10.0"
}
I created a react app without create-react-app. I did my setup manually. Now iam getting a dependency conflict. It is gone when i remove webpack server or with the usage of --legacy-peer-deps. But i do not want to force things. Is there anyone with real solution ?
Unsure which tutorial you are following, but if it is this one: https://www.linkedin.com/pulse/create-react-app-without-create-react-app-cra-elhousieny-phd%25E1%25B4%25AC%25E1%25B4%25AE%25E1%25B4%25B0/?trackingId=tP9OVj7YQxCNKYXrT5zD1A%3D%3D
I ran into the same issue, I removed Webpack-server, as most other tutorials do not include it. Since removing it seems to be work.

React full stack app deploy to Google App Engine with error webpack: not found

everyone. I try to deploy Reack full stack app from https://github.com/crsandeep/simple-react-full-stack
And it doesn't work. I read too many posts about deploying react to gcloud but there are simple apps and not full stack apps.
my packege.json, I took it from git
{
"name": "simple-react-full-stack",
"version": "1.0.0",
"description": "Boilerplate to build a full stack web application using React, Node.js, Express and Webpack.",
"main": "src/server/index.js",
"scripts": {
"build": "webpack --mode production",
"start": "npm run build && node src/server/index.js",
"client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
"server": "nodemon src/server/index.js",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Sandeep Raveesh",
"license": "ISC",
"dependencies": {
"babel-polyfill": "^6.26.0",
"express": "^4.16.3",
"react": "^16.5.2",
"react-dom": "^16.5.2"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-eslint": "^10.0.0",
"babel-loader": "^8.0.0",
"clean-webpack-plugin": "^1.0.0",
"concurrently": "^4.0.0",
"css-loader": "^2.0.0",
"eslint": "^5.0.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-plugin-import": "^2.11.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.7.0",
"file-loader": "^3.0.0",
"html-webpack-plugin": "^3.2.0",
"nodemon": "^1.17.3",
"style-loader": "^0.23.0",
"url-loader": "^1.0.1",
"webpack": "^4.5.0",
"webpack-cli": "^3.0.8",
"webpack-dev-server": "^3.1.3"
}
}
my app.yaml I took it from google
env: flex
runtime: nodejs
I run in terminal
gcloud beta app deploy
And I have error
Updating service [default] (this may take several minutes)...failed.
ERROR: (gcloud.beta.app.deploy) Error Response: [9]
Application startup error:
> simple-react-full-stack#1.0.0 prestart /app
> npm run bundle
> simple-react-full-stack#1.0.0 bundle /app
> webpack --config webpack.config.js
sh: 1: webpack: not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! simple-react-full-stack#1.0.0 bundle: `webpack --config webpack.config.js`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the simple-react-full-stack#1.0.0 bundle script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2019-12-04T18_45_03_238Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! simple-react-full-stack#1.0.0 prestart: `npm run bundle`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the simple-react-full-stack#1.0.0 prestart script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2019-12-04T18_45_03_252Z-debug.log
I don't understand what it need, I tried to add "npm install" and it doesn't work too.
How fix it?
Here is a community tutorial you can follow, get everything working as described first and then start making the desired edits.
Please make sure you are following the steps of "Preparing the app" section, as it seems like you are missing on of the mentioned steps.
npm init
npm install --save webpack express pug
As well as modifying package.json to include:
"scripts": {
"bundle": "webpack --config webpack.config.js",
"prestart": "npm run bundle"
}
Also note that:
Webpack must be listed in the dependencies of the package.json file,
as by default devDependencies are not installed when the app is
deployed to Google App Engine.
Also keep in mind that gcloud beta app deploy is still in BETA and may have changes without notice. So for what you are trying to achieve there is no need for using beta. Instead simply use gcloud app deploy.

react-router-dom#4.0.0 requires a peer of react#^15 but none is installed. You must install peer dependencies yourself

I have installed all required libraries using npm install and I also done npm install --save react-router-dom#4.0.0 but I am still getting this error.
My Package.json
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18",
"chai": "^3.5.0",
"chai-jquery": "^2.0.0",
"jquery": "^2.2.1",
"jsdom": "^8.1.0",
"mocha": "^2.4.5",
"react-addons-test-utils": "^0.14.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"babel-preset-stage-1": "^6.1.18",
"lodash": "^3.10.1",
"react": "^15.6.2",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router": "^2.0.1",
"react-router-dom": "^4.0.0",
"redux": "^3.0.4"
}
After updating react, redux, react-redux,and all I got no warnings but got following error after I ran npm start
> node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js
events.js:160
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE 127.0.0.1:8080
at Object.exports._errnoException (util.js:1020:11)
at exports._exceptionWithHostPort (util.js:1043:20)
at Server._listen2 (net.js:1258:14)
at listen (net.js:1294:10)
at net.js:1404:9
at GetAddrInfoReqWrap.asyncCallback [as callback] (dns.js:62:16)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:81:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! redux-simple-starter#1.0.0 start: `node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the redux-simple-starter#1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/myhome/.npm/_logs/2017-12-23T00_38_08_579Z-debug.log
You need React in your package.json
Try the following in the folder where your package.json is placed:
npm install react --save
If react is already present in your package.json verify that the version is higher then 15.0.
If that's not fixing your error, please provide us your package.json
With the help of #rieckpil, I have followed following steps and it fixed my problem.
1: On this page I collected latest version for all following libraries react, react-dom, react-redux, react-router, react-router-dom, redux and replaced it in my package.json file.
2: Run npm install
3: Run npm start. If getting errors like above, simply restart you computer and run npm start again.

Resources