I currently have an npm project built with vue-cli and socket.io server.
This is how my project is structured:
Project/
|--node_server/
| |--server.js
|--src/
| |--main.js
| |--App.vue
| |--other .vue files and folders
I do not know how to deploy this app on Heroku because I will need to run two scripts while deploying that is node server.js (in the node_server folder) and npm run build or npm run dev (in the root folder).
What are the steps on how to deploy it successfully? Heroku takes my project from github whenever I push and builds it automatically. I have tried deploying but it ends up with an error page.
Let's say you need to build the front-end with build script first, and then you need to run nodejs server with start script which is node server.js.
...
"scripts": {
"build": "gulp or something idk"
"prestart": "npm run build",
"start": "node node_server/server.js",
},
...
But if you need to run these two scripts at the same time you can achieve this with something like that:
...
"scripts": {
"build": "gulp or something idk"
"start": "npm run build & node node_server/server.js",
},
...
I hope it would be helpful.
For an example, you can take a look at the package.json of one of my project: https://github.com/hisener/pirate-radio/blob/master/package.json
For more information, please refer https://docs.npmjs.com/misc/scripts
Related
Here is my package.json
"scripts": {
"start": "react-scripts start",
"start:develop": "env-cmd -f env/.env.develop react-scripts start",
"start:stage": "env-cmd -f env/.env.stage react-scripts start",
...
}
env folder structure
env
├─ .env.develop (env=develop)
├─ .env.stage (env=stage)
When run on local (MacOS)
"yarn start" runs NodeJS app on local with default "env" = local (which is defined in other file)
"yarn start:develop" runs NodeJS app on local with "env" = develop
But now when I want to deploy this to GCP AppEngine, it's always deploy with "start" command (equivalent to "yarn start" on local)
How can I deploy "yarn start:develop" to AppEngine without declaring more environment variables in app.yaml?
From the documentation about what happens when you deploy your program,
Node.js modules are installed in the cloud as listed in your package.json and package-lock.json files and your service is started by using npm start.
I interpret the above to mean your project on the cloud is always run with start script and GAE will not/does not know how to use another script.
A possible workaround could be to deploy your app using a different version name e.g. dev i.e. you have
Your default version with "start": "react-scripts start"
dev version with "start": "env-cmd -f env/.env.develop react-scripts start"
Both of your versions use only the start script but they do different things
I have a React app and here is my folder setup:
If I cd src and then run node server.js, I can see my server is running based off messages in added into console.log.
But when I'm in the root folder and I run npm start, the server.js is not connected. Here is my root package.json, what am I missing?
If you want to run react app and server simultaneously, you can use concurrently. Install it, and modify your scripts section so you will have separate entries for react-scripts start and node src/server.js. Then you can run them both with concurrently. It will look something like this:
{
"scripts": {
"start-react-app": "react-scripts start",
"start-server": "node src/server.js",
"start": "concurrently \"npm:start-react-app\" \"npm:start-server\""
}
}
This way, when you run npm start it will launch both scripts.
I am new to react and am trying to create a project that makes use of react, node, and express. Having a lot of issues setting up react correctly by myself, I decided to use create-react-app.
I found a bunch of tutorials online and a lot of them seem to suggest separating the front end and the back end into different directories resulting in two package.jsons.
so the project structure would look something like this:
Root
|
------client
| |
| -------package.json with front end dependencies
|
package.json with the back end dependencies
The client diretory is the one created with "npm init react-app" and also contains the package.json that has the react-scripts. Currently if I use command "npm run build" in the client directory it creates a build without the backend files inside the root folder, and if I use "npm run build" in the root folder it doesn't work because I do not have create-react-app scripts in that package.json.
My main question is how would I make a build of my project if I have two package.jsons and if it is normal/best practice to split up front end and back end like this?
Any advice would be much appreciated.
This folder structure is one of the most used structure. You are actually separating front-end and back-end, that would result in scalable architecture.
To build your project from one single command, you need to install a dependency concurrently. It will enable multiple commands at once. Then make changes to your root package.json.
Below is an example package.json :
"scripts" : {
"build-client": "npm run build --prefix <FRONTEND_FOLDER NAME>",
"build": "<YOUR SERVER BUILD COMMAND>",
"build-project" : "concurrently \"npm run build\" \"npm run build-client\""
}
Hope it helps!!!
I think you have to separate CRA(create-react-app) and backend server(express).
This means you have to run front and back in different port and then make a npm scripts that boths run front and back.
Like this.
ROOT/package.json
"client": "cd client && yarn start",
"server": "nodemon server.js",
"dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
I am writing a Node.js app and using Heroku to host it. And also I use Webpack + Babel to bundle all my server files into one and to use ES2015 syntax. But the thing is, I need to build my app before running it. So I put this command into package.json:
"scripts": {
"start": "webpack && node build/server.js"
},
This works, but the problem is, when I run heroku restart, my app runs only after rebuild. And the same story when my app crashes.
So I guess I need 2 different commands: one on deploy (webpack) and one in npm start (node build/server.js)
How can I accomplish this?
Actually it was not that hard. Just had to change my package.json to
"scripts": {
"heroku-postbuild": "webpack",
"start": "node build/server.js"
}
(according to this article: Heroku Node.js Support)
I am deploying a Node.js application on Heroku. My production deployment is based on a Grunt task that minifies js and css files, placing them in a /dist folder from which they are called.
How can I add this step on the Heroku deployment?
Use a postinstall script, as outlined in Heroku's DevCenter docs for node:
https://devcenter.heroku.com/articles/node-with-grunt
eg:
"scripts": {
"postinstall": "grunt uglify",
"start": "node server.js"
}