I've been following facebook tutorial with reactjs
I installed npm install -g create-react-app https://www.npmjs.com/package/react-scripts and created the app with it
But now I'm confuse how do I deploy my app to, for example, digital ocean? I know I can use pm2 to run a node server but I don't see how does npm start works as it just runs this in the package.json
{
"name": "hello-world",
"version": "0.1.0",
"private": true,
"devDependencies": {
"react-scripts": "0.7.0"
},
"dependencies": {
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"express": "^4.14.0",
"mongoose": "^4.6.8",
"react": "^15.3.2",
"react-dom": "^15.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
"start": "react-scripts start" what is it actually starting there?
also, it says that to build your app for deployment to use npm run build that just gives me a folder named build but I can't find anything to run node on.
I recommend reading the User Guide as it answers many common questions.
npm start starts the development server. It's only useful for development so you should never use it in production. This is printed in its output.
npm run build produces a static build folder with HTML, CSS, and JS files. You don't need Node to run it. It is static. To serve it, you would need to use any static file server. You can do this with Node, Python, Nginx, or any file server that can serve static files. This should also be printed in the command's output.
The deployment instructions vary depending on your hosting provider but basically you need to serve the build output from the server root, and you're set. If you use client-side routing you'll also want to configure your web server to serve index.html as a fallback for any path.
The user guide includes specific deployment instructions for different providers so check it out.
Related
I have my NodeJS app wrote using TypeScript and based on the Express framework. I want to host it in GCP cloud with gcloud app deploy command.
So, first of all, I build my TS sources to JavaScript -is that the correct way of doing it?.
Then from the build (with JS source code) folder I'm trying to run npm start command and it works successfully and I'm also able to check it with Preview:
.
It works well. So far, so good.
Then I run gcloud app deploy from the build folder (with built to JS sources) and I didn't see any errors during deploy.
But afterward, I receive a 500 error on each request whenever I'm trying to reach the deployed app. I've taken a look into a log and I see next error:
Error: Cannot find module 'express'
What seems to be the problem?
I tried the next commands in the build folder:
npm install
npm install express --save
npm install -g express
sudo apt-get install node-express
Nothing works for me.
Here is my package.json file:
{
"name": "full-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "tsc",
"dev": "node -r ts-node/register ./src/server.ts",
"debug": "ts-node --inspect ./src/server.ts",
"start": "node build/server.js",
"prod": "npm run build && npm run start"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-node": "^7.0.1",
"typescript": "^3.0.1"
},
"dependencies": {
"#types/lodash": "^4.14.116",
"body-parser": "^1.18.3",
"connect": "^3.6.6",
"cors": "^2.8.4",
"crypto": "^1.0.1",
"express": "^4.16.3",
"firebase-admin": "^6.0.0",
"lodash": "^4.17.10"
}
}
Any idea what I'm missed? Is this the correct way to deploy an app wrote with TypeScript to GCP cloud?
app.yaml:
# [START app_yaml]
runtime: nodejs8
# [END app_yaml]
since you are running gcloud app deploy from within the build folder,probably the package.json is not deployed as npm install is run first by app engine there is no way express could be missing.you can go to gcp console and under app engine view the version and then under diagnose you can view the source(the files that were actually deployed to app engine).keep in mind that this is only possible for the standard version and not the flex.I can see from your app.yaml you are using the standard.If some files are missing then go to your app root directory and in your .gcloudignore file you can ignore the files/folders you do not want to deploy.then run gcloud app deploy from within the root directory of your project
The problem was pretty simple. Seems like gcloud app deploy use npm run build & npm run start commands to start application somewhere inside. To host Node.Js wrote on TS first we need to build it to simple JS using tsc command. Then in the build folder rewrite package.json file to use correct commands. Look at my start command: "start": "node build/server.js". I was using it inside build folder as well so that's mean gcloud command was searching in /build/build/ folder. I've changed start command to "start": "node server.js" and then all works well.
I'm trying to deploy a 'create-react-app' project to Heroku. I used the Heroku Create-React-App boilerplate and followed another tutorial on setting up a backend api for connecting to my custom server.js file.
When I deploy to Heroku, the build runs fine but my app still will not connect to my server.js file.
I assume this is either because the proxy property in my package.json is supposed to point to the same port defined in my server.js file (which Heroku would assign automatically, which I don't know how to check) or perhaps my server.js file isn't running at all.
Been having a very hard time finding any resources that properly explain how to deploy a 'create-react-app' with a custom back-end (server.js).
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"proxy": "https://localhost:5000",
"dependencies": {
"axios": "^0.17.1",
"body-parser": "^1.18.2",
"md5": "^2.2.1",
"mongodb": "^3.0.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.1.1",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2"
},
"scripts": {
"start": "react-scripts start",
"start:server":"node server.js",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Line in server.js where I set the port:
const port = process.env.PORT || 5000;
I was able to deploy my app to Heroku by following this tutorial from fullstackreact.com and studying the accompanying repo.
Basically, I needed to bundle my client-side code and then make sure my server.js file was serving that bundle as a static file. I'm sure there's other ways to go about this, like running concurrent scripts for the webpack-dev-server and the backend api (server.js), but this worked for me without much headaches.
I've pulled a github repository containing code for a reactjs app into one of my directories but I can't find a way to run the app on my computer. I can start a new app using create-react-app but I can't/(don't know how to) use the existing app for instead ofa freshly created one.
I'm running Ubuntu 16.04.3 on a virtual machine, my node version is 4.2.6.
I've tried sudo apt-get install --only-upgrade nodejs but it simply says my node version is already up to date. (I include this because npm start gives me a bunch of errors and tells me that it may be because I might have to update node) but the app I create with create-react-app works fine?
The error:
Package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^3.3.7",
"express": "^4.16.2",
"package.json": "^2.0.1",
"prop-types": "^15.6.0",
"react": "^16.0.0",
"react-bootstrap": "^0.31.5",
"react-dom": "^16.0.0",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.14",
"uuid": "^3.1.0",
"webpack": "^3.8.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-preset-env": "^1.6.1"
}
}
Carry out the following steps:
//Step 1:
git clone [repository url]
//Step 2:
cd [local repository]
//Step 3:
//Check package.json file and ensure scripts are notated as below:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
//Step 4:
/* Delete the node_modules folder and any 'lock' files such as
yarn.lock or package-lock.json if present.*/
//Step 5:
npm install
//Step 6:
npm start
To Note: There can be some conflict between yarn and npm when cloning from certain repositories. It's best to assume that every repo may need trimming before ultimately running npm install. I tested the above steps several times under several different factors. This is the best I have so far.
In case of issues shown after npm install, run the below to automatically fix the issues:
npm audit fix
Alternatively, use the below to see the errors:
npm audit
I'm trying to setup my create-react-app instance with webpack-dev-server.
This is my package.json file
{
"name": "reactgs",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-scripts": "1.0.14"
},
"scripts": {
"start": "react-scripts start",
"build": "webpack-dev-server --entry ./node_modules/react-scripts/bin/react-scripts.js --output-filename ./dist/bundle.js --inline --progress",
},
"devDependencies": {
"webpack-dev-server": "^2.9.1"
}
}
I don't have a webpack.config.js file.
When I run
npm run build
The output appears as
The following line runs fine.
npm start
I also have webpack setup fine on the same machine for a different project.
Does anyone know how to properly configure webpack for create-react-app?
npm start does the HMR for you out-of-the box. It will host your application using webpack-dev-server --hot itself. You just need to hook the HMR code to tell webpack what to watch and reload as necessary.
This GitHub conversation offers a pretty decent simple solution for hooking HMR (https://github.com/facebookincubator/create-react-app/issues/2317) with and without Redux.
I am migrating an ES2015 node.js application from Heroku to Azure.
The current start-up command running on Heroku is
"start": "./node_modules/babel-cli/bin/babel-node.js index.js"
However, on Azure I am getting
Invalid start-up command "./node_modules/babel-cli/bin/babel-node.js index.js" in package.json. Please use the format "node <script relative path>".
Which indicates that Azure only supports vanilla node for npm start.
I'm aware that running babel-node on production isn't ideal, but I was hoping for a straightforward migration.
Three options that would require a bit of re-architecting are:
Using a gulp workflow to precompile ES2015: https://github.com/christopheranderson/azure-node-es2015-example
Using a bash workflow to precompile ES2015: http://www.wintellect.com/devcenter/dbaskin/deploying-an-es6-jspm-nodejs-application-to-azure
Using babel-register ala [link in comments].
I suspect option 3 will be easiest but checking if anyone has come across a similar issue and managed to run babel-node directly in npm start on Azure.
According your issue, please modify your start npm script to node ./node_modules/babel-cli/bin/babel-node.js index.js on Azure Web Apps.
Here is the content in test package.json:
{
"name": "website",
"description": "A basic website",
"version": "1.0.0",
"engines": {
"node": "5.9.1",
"npm": "3.7.3"
},
"scripts": {
"start": "node ./node_modules/babel-cli/bin/babel-node.js index.js"
},
"dependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-cli": "^6.0.0"
}
}
Meanwhile if you need a higher Node.js version, you can specify in package.json, refer to https://azure.microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-azure-apps/ for more.
Just as what Gary said, you need to update your package.json using the command below.
"scripts": {
"start": "node ./node_modules/babel-cli/bin/babel-node.js index.js"
}