hi i have a nodejs and reactjs application in my local , developed the application from a boiler plate code , in boiler plate code package.json i have these following scripts
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}
as of i know it can be deployed on heroku with these scripts , can i use same scripts to deploy on azure , do i need to change anything here .
// Serve static assets if in production
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server started on port ${port}`));
and this is what i have in my server.js as a starting point. i don't have any config folder to diff environments.for an example
// i don't have this folder structure and am not using webpack
-- config
|-- dev.json
|-- prod.json
can some one suggest , what is the best way to deploy it , or can i use same post-build script by changing it key like azure-postbuild
edited : i think i should use postinstall instead of heroku-postbuild
Related
I'm trying to deploy MERN stack app to Heroku, everything works fine except the landing page.
I tried every single solution I can but nothing worked.
Here is my app landing page, it displays blue screen with a button up top, if try to navigate to different routes like /contact or /plans it works fine.
I checked the logs and network requests everything is okay 200 status.
I tested the app on my machine and it worked as expected.
On Heroku it displays blue screen
Here is my server.js code
// Serve Static assests if in production
if (process.env.NODE_ENV === 'production') {
//set Static folder
app.use(express.static('frontUI/client/build'));
app.get('*', (req, res) => {
res.sendFile(
path.resolve(__dirname, 'frontUI', 'client', 'build', 'index.html')
);
});
}
here is my script
"scripts": {
"client-install": "npm install --prefix frontUI/client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix frontUI/client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix frontUI/client && npm run build --prefix frontUI/client"
},
My landing page route
<Route
exact
path="/"
render={matchProps => (
<WithLayout
{...matchProps}
component={ServicesView}
layout={MainLayout}
/>
)}
/>
I am learning Node.js and this is my first code.
I created a file called server.js below with the code
server.js
const express = require('express');
const dotenv = require('dotenv');
//load env vars
dotenv.config({ path: './config/config.env'});
const app = express();
const PORT = process.env.PORT || 5000;
app.listen(
PORT,
console.log(`Server running in ${process.env.NODE_ENV} mode on port ${PORT}`)
);
I have this section in my package.json file
package.json
"scripts": {
"start": "NODE_ENV=production node server",
"dev": "nodemon server"
},
Here is the content of my config.env file
config.env
NODE_ENV=development
PORT=5000
When I run npm run dev everything is fine and runs
When I run npm start to run production, I get the error below.
'NODE_ENV' is not recognized as an internal or external command,
operable program or batch file.
How can I resolve this? I need npm start to run
For Windows:
"scripts": {
"start": "node server.js",
"dev": "set NODE_ENV=DEVELOPMENT && node server",
"prod": "set NODE_ENV=PRODUCTION && node server"
}
For UNIX and other OS:
"scripts": {
"start": "node server.js",
"dev": "export NODE_ENV=DEVELOPMENT && node server",
"prod": "export NODE_ENV=PRODUCTION && node server"
}
By the error message, you are running this in Windows. You need to use Set to setup an environment variable.
"scripts": {
"start": "Set NODE_ENV=production&node server",
"dev": "nodemon server"
}
However, setting up environment variables in this manner is less secure and platform dependent. In other words, any attacker getting access to your server file system can set any environment variable by modifying the package.json. Also, if you decide to move your production to a Linux host later, your start script is going to be broken again.
So, the best practice is to set your environment variables via host configuration setup. Different cloud providers offer different methods for this.
Also, you might not need to use npm to run your script at all. You can call node server directly in your shell.
An easy way to solve this problem:
npm install --save-dev cross-env
"start": "cross-env NODE_ENV=production node server"
This means that you don't have to worry about the platform
for read more: https://www.npmjs.com/package/cross-env
I'm setting up a webapp in next.js that runs in parallel with a node express server which does some middleware work to interface with an API server.
I have everything working however I don't know how to make it all work together when making a npm run start. The only way it works is with a "node server.js" in one terminal and a "npm run start" in another.
I've tried to add a package.json script like this:
"start-server": "next start && node server.js"
but it only starts the next.js instance, and if I reverse the order then it only starts the node instance.
How do I make them both work so I can deploy this project?
Also since Next is a server-side package, you can build the next app to use your server.js code before deploying the server.
like so:
/* eslint-disable no-undef */
const express = require('express');
const next = require('next');
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();
const options = {
...
};
app.prepare().then(() => {
const server = express();
server.get('*', (req, res) => {
return handle(req, res);
});
server.listen('8700', err => {
if (err) throw err;
console.log(`> Ready on Port 8700`);
});
});
Install Concurrently npm package to your node dependencies.
npm install concurrently
Add the following scripts to node server's package.json
"frontend-install": "npm install --prefix frontend",
"start": "node server.js",
"server": "nodemon server.js",
"frontend": "cd ./frontend && npm run start",
"dev": "concurrently \"npm run server\" \"npm run frontend\""
i am assuming that your next application is in a folder/directory called "frontend".
3. Add the following code to package.json of the nextjs application.
"proxy": "http://localhost:5000"
Now npm run start command to start node server and nextjs app together.
I deployed project on Heroku.
It was working well on dev, but on production it has problems with routing. It always tries to use server api routes on client side. What is wrong with this code?
app.use("/api/games", games);
app.use('/public', express.static(path.join(__dirname, '/public')));
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
});
}
I also wrote Heroku-postbuild script in package.json
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
Client side works on React
Please try to run app in production mode or set NODE_ENV to production.
I think this NPM_CONFIG_PRODUCTION=false will run your app in development mode so you have to set it to true ( NPM_CONFIG_PRODUCTION=true ).
Please also print process.env.NODE_ENV before if statement to check your env mode.
After scripts list in package.json I added engines with node and npm versions and it started to work well
"scripts": {
...
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"engines": {
"node": "10.15.3",
"npm": "6.4.1"
},
I'm using VueCLI 2 and build as production. THe build.js is built and compiled into 200KB. When I re-run the server as development, it loaded 3MB. I'm sure the build.js inside dist folder is 200KB. I tried to open index.html but it doesn't work and redirect to root directory on website.
Package.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
Webpack
module.exports = { ...
module:{
...
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
})
],
devtool: '#eval-source-map'
},
...
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: true
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module) {
return module.context && module.context.indexOf('node_modules') !== -1;
}
})
])
}
HTML
<body>
<script src="/dist/vendor.js"></script>
<script src="/dist/main.js"></script>
</body>
Command
npm run build
npm run dev
npm run build creates a dist directory with a production build of your app.
In order to serve index.html in a browser you need an HTTP server.
For example serve:
npm install -g serve
serve -s dist
The default port is 5000, but can be adjusted using the -l or --listen flags:
serve -s build -l 4000
Docs:
https://create-react-app.dev/docs/deployment#static-server
https://github.com/zeit/serve
https://cli.vuejs.org/guide/deployment.html#previewing-locally
Production build can be run locally by utilizing Vue CLI's tooling simply by running:
vue-cli-service serve --mode production
For convenience, this can be added to package.json scripts:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"production": "vue-cli-service serve --mode production"
}
Command:
$ npm run production
Very easy with express, and highly extensible/configurable.
Install
npm install -D express
Compose
server.js
// optional: allow environment to specify port
const port = process.env.PORT || 8080
// wire up the module
const express = require('express')
// create server instance
const app = express()
// bind the request to an absolute path or relative to the CWD
app.use(express.static('dist'))
// start the server
app.listen(port, () => console.log(`Listening on port ${port}`))
Execute
node server.js
The Vue CLI tooling (vue-cli-service serve --mode production) still seemed to be serving the development files for me, albeit with process.env.NODE_ENV === 'production'.
To serve the contents of dist, the following worked for me without having to install any extra packages:
npm run build
npx serve dist
With custom port and SSL key/certificate:
npx serve dist -l 8095 --ssl-cert .\cert.pem --ssl-key .\cert-key.pem
You can also put this command into your package.json, e.g.
"scripts": {
"serve": "vue-cli-service serve",
"prod": "npx serve dist",
...
}
Then just do:
npm run prod
Build should be deployed to the server, Hence, I don't think that there is any inbuilt way in vue-cli to run build locally.
To run build locally, we need to configure the server separately and run the build on the server as follow,
1) Install lite server via below command
$ npm install -g lite-server
2) Add below scripts in package.json
"lite": "lite-server –port 10001",
"start": "npm run lite"
3) In root directory create bs-config.js file and add below script
module.exports = {
port: 3000,
server: {
baseDir: './dist'
}
}
4) Lastly, Run it via below command
$ npm run start