Serving Vue.js Server Side Rendering on Node-server - javascript

I'm trying to get the Hackernews 2.0 demo up and running on my Digital Ocean droplet, but I fail.
npm run start spins up the server on :8080.
npm run build builds for production.
The defined build tasks are defined here:
"scripts": {
"dev": "node server",
"start": "cross-env NODE_ENV=production node server",
"build": "npm run build:client && npm run build:server",
"build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.config.js --progress --hide-modules",
"build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.config.js --progress --hide-modules"
}
...and the entire repo is here.
But what should I execute to serve as a :80 website?
I asked on Gitter.im, on the Vue-channel, but with zero success.
Anyone?

You don't need to execute anything special. Simply change the definiton of listen port inside the application, on line 89 of server.js
const port = process.env.PORT || 80 // << changed here
or export env Var PORT prior to start. In linux, something like
export PORT=80 && npm start
EDIT:
or even create you own start script on package.json
"start80": "cross-env NODE_ENV=production PORT=80 node server",
(maybe- i dont' know exactly how cross-env works)

Related

trying to make "npm run dev" create 2 shell instances

I'm using json-server as my local server for a nuxt project and i want to automatically launch the server and then run the project on another shell instance using "npm run dev"
in the scripts tag in package.json this is what i came up with :
"dev": "json-server --watch db.json --port 3004 & nuxt"
but this script only starts the server
try concurrently
npm install -g concurrently
"dev": "concurrently \"json-server --watch db.json --port 3004\" \"nuxt""

How to integrate starting Sass with the node server?

How to start localhost node.js live server with Sass ? so I wont have to keep switching between starting sass, and do my changes then start the node again ? since its too time consuming ?
also please some info about the --recursive.
"scripts": {
"start": "nodemon server.js",
"start-server": "node server.js",
"sass": "node-sass -w FrontEnd/public/scss/ -o FrontEnd/public/css/ --recursive"
}
Modify your script file:
{
"scripts": {
"sass": "node-sass -o /path/to/dist /path/to/src",
"sass:watch": "npm run sass && npm run sass -- --watch --recursive"
}
}
And you can use it like this: npm run sass:watch
Alternative method:
"scripts": {
"build:sass": "node-sass -r --output-style compressed src/style.scss -o dist",
"watch:sass": "npm run build:sass && npm run build:sass -- -w"
}
In the above example, the watch:sass script works as follows:
Run the build:sass script. This will compile your CSS.
Run the build:sass script again, but this time include the -w flag. This will compile your CSS when one of your SASS file changes.

How to configure pm2 with webpack for typescripts compile and reload?

Is there any boiler plate code to use pm2 with webpack watch option for ts files auto hot reload?
pm2 start index.js is helpful to run directly, but how to add multiple tasks before doing it like watch files and auto reload using webpack and pm2 from dist folders?
After much research considering performance, I might add live reload, which is a to-do task – but not a priority as of now.
"scripts": {
"build": "webpack --config webpack.config.js --watch",
"pm2": "pm2 start ./dist/server.js --watch=true",
"postinstall": "npm run build",
"test": "jest --forceExit",
"test-ci": "npm test && cat ./coverage/lcov.info | coveralls",
"start": "supervisor ./dist/server.js",
"server:dev": "concurrently \"npm run build \" \"npm run start\""
}
Create a process.json for pm2 config In the script key you can give a webpack compiler to run. I am not sure if it will run for it watch reload.

How to deploy MERN project using webpack

I use the following project which use webpack
https://github.com/Hashnode/mern-starter
I want to deploy it (to prod) i get error
Error: Cannot find module './dist/manifest.json'
This error is coming from https://github.com/Hashnode/mern-starter/blob/master/index.js
But I dont see the dist folder in the project, why, and how should I build it?
I believe that the Dist folder should be created during the build time (manification etc) so how should I trigger it ?
This is the package.json
{
"name": "mern-starter",
"version": "2.0.0",
"description": "Boilerplate project for building Isomorphic apps using React and Redux",
"scripts": {
"test": "cross-env NODE_ENV=test PORT=8080 MONGO_URL=mongodb://localhost:27017/mern-test node_modules/.bin/nyc node --harmony-proxies node_modules/.bin/ava",
"watch:test": "npm run test -- --watch",
"cover": "nyc npm run test",
"check-coverage": "nyc check-coverage --statements 100 --branches 100 --functions 100 --lines 100",
"start": "cross-env BABEL_DISABLE_CACHE=1 NODE_ENV=development nodemon index.js",
"start:prod": "cross-env NODE_ENV=production node index.js",
"bs": "npm run clean && npm run build && npm run build:server && npm run start:prod",
"build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js",
"build:server": "cross-env NODE_ENV=production webpack --config webpack.config.server.js",
"clean": "rimraf dist",
"slate": "rimraf node_modules && npm install",
"lint": "eslint client server"
},
I think that the start:prod should trigger it in the webpack but
its not happing ...any idea ?
As per the comments and the documentation:
Building the dist folder is done either via npm run bs or npm run build && npm run build:server (which is what npm run bs executes).
Starting the production build should be done via npm run start:prod (or by copying the commands from the package.json file: cross-env NODE_ENV=production node index.js)

How to use nodemon in npm scripts to build and start scripts?

"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon lib/index.js --exec npm run build"
}
Using the command npm run watch results in the following wrong command being run: [nodemon] starting "npm lib/index.js run build"
How would I write a nodemon command that, on reload, transpiles the code using babel and reloads the code?
"scripts": {
"build": "babel src -d lib",
"start": "node --use_strict ./lib/index.js",
"watch": "nodemon --exec \"npm run build && node lib/index.js\" -e js --ignore lib/"
}
Then run npm run watch. After this, nodemon will rebuild the project and then restart the server every time source code(.js files) is modified.
--exec specifies what non-node scripts (also works for node scripts as above node lib/index.js) you want nodemon to execute when there is a file change.
-e specifies what file extensions you want nodemon to watch.
--ignore specifies the files/directories you want nodemon to ignore. This option is essential to solve this problem because if you do not specify to ignore this lib/ folder, nodemon will restart infinitely as the compiled files in lib/ are also .js files.
You could simply run your code with babel-node to avoid explicit transpiling.
$ nodemon lib/index.js --exec babel-node --presets=es2015,stage-2
It seems like this is the recommended way to use nodemon with babel.
Please note, running --exec could have unintended side effects when running your development environment remotely of your localhost
You can have two nodemons, one to transpile and the other to run your code. In package.json you can do something like this:
"scripts": {
"serve": "nodemon --watch dist/ ./dist/index.js",
"build" : "nodemon --watch src/ --exec babel ./src --out-dir ./dist --source-maps --copy-files"
},
There is an option to build files with Babel in "watch" mode, let Nodemon monitor just the "build" folder and restart the app upon changes to the compiled output.
{
"name": "app",
"version": "1.0.0",
"private": true,
"dependencies": {},
"devDependencies": {
"#babel/cli": "^7.6.0",
"#babel/core": "^7.6.0",
"#babel/preset-env": "^7.6.0",
"nodemon": "^1.19.2"
},
"scripts": {
"build": "babel src --out-dir build --source-maps=inline --verbose",
"start": "yarn build --watch & sleep 1 && nodemon --watch build build/index.js"
}
}
This example is taken from GraphQL API Examples repository on GitHub.
"scripts": {
"build": "babel src -d lib",
"start": "nodemon --exec babel-node lib/index.js",
"serve": "npm run build && node lib/index.js"
}
Serve is for production, with npm start what you do is transpile first and then run nodemon.
A better option would be to not use a global install but instead use the package installed locally. This will also help for automation builds that might be setup the same as your local machine per 12 factor app design.
"scripts": {
"watch": "node ./node_modules/nodemon/bin/nodemon.js"
}

Categories

Resources