I'm a beginner developing with Nodejs and React.
Right now, I've got a first version of my web application which works correctly in development environment, but I'm trying to build a version for production environment but I've got this error
ReferenceError: document is not defined
The scripts of my package.json are:
"scripts": {
"dev-webpack": "webpack-dev-server --hot --mode development",
"clean": "rm -rf ./dist",
"dev": "npm run build-dev && cross-env NODE_ENV=development nodemon --exec babel-node src/server/server.js --ignore ./src/client",
"build-dev": "npm run clean && npm run compile-dev",
"compile-dev": "NODE_ENV=development webpack -d --config ./webpack.config.babel.js --progress",
"compile": "NODE_ENV=production webpack -p --config ./webpack.config.babel.js --progress",
"build": "npm run clean && npm run compile",
"start": "npm run build && node ./dist/assets/js/bundle.js"
},
And I try to create the version for production environment with the command npm run start
I have been looking for information about the problem and it seems it's due because I have no Browserify my web application. But, I don't know how to do this correctly nor the steps to follow to do it correctly.
I am seeking a list of the steps required to build a correct version for production environment.
Edit I:
These are the static files generated with "build" script:
The React application is designed to be run in a browser.
When you run dev-webpack you are running an HTTP server and pointing a browser at it.
When you run build you are creating a static JavaScript file. You need to deploy it to a web server (along with the associated HTML document) and then point a browser at the HTML document.
You are currently trying to execute bundle.js with Node and not a browser.
You need to serve your index.html file. You can use serve to host the HTML file.
Related
I have an express API which I am hosting on Heroku. I created two projects: one project points at my Master Branch (Prod) and the other at my Development branch (Dev).
I have two scripts in my package JSON:
"scripts": {
"devStart": "export NODE_ENV=development && nodemon server.js",
"start": "export NODE_ENV=production && node server.js"
}
How can I make it so, that the development branch runs "DevStart" and Master runs "start". Currently Prod is working fine as node start is the default script.
I understand I can put commands in my procfile, however since both Dev and Prod use the same codebase, I would need to change this with each commit. Is there a dynamic way to do this?
Ok, This might not be the correct way but here is how I did it.
I seen you can set the NODE_ENV variable for the Heroku app using terminal:
heroku config:set NODE_ENV=development --app {app-name}
My package JSON though was overwriting this when the app deployed.
"scripts": {
"devStart": "export NODE_ENV=development && nodemon server.js",
"start": "export NODE_ENV=production && node server.js"
},
I changed it to:
"scripts": {
"localStart": "export NODE_ENV=development && nodemon server.js",
"start": "node server.js"
},
This now resolves the problem. No need for the Procfile or to setup environment variables within Heroku.
On Heroku I have two apps, one for production which I don't change the NODE_ENV variable as it defaults to production, and another for Development, which I do change the NODE_ENV variable to 'Development'.
Each app is hooked up to a different branch within the same code base ( Development(Development) & Master(Production) ). Any deploys to either branch will cause a rebuild using the correct NODE_ENV variable for each respective branch.
In Fastify framework is there anyway to reflesh the browser when changes happen on save.
In Express we have npm livereload as a middleware to listen to backend changes in Express. Are there any similar functions in Fastify or do I have to write my own registered plugin to automatically reflesh the browser on backend changes?
The livereload package that you mentioned is a general-purpose tool that works with Fastify as well. I was able to make it run with the following packages:
typescript Running tsc -w -outdir dist/ to watch the .ts files and transpile them into .js files
nodemon Running nodemon -r dotenv/config dist/server.js to watch the .js files and restart the web server
livereload Running livereload ./dist/ -w 500 so that the browser refreshes once the server restarted
concurrently To tie it all together in the package.json
"scripts": {
"build": "tsc",
"start": "node -r dotenv/config dist/server.js",
"dev:tsc": "tsc -w -outdir dist/",
"dev:watch": "nodemon -r dotenv/config dist/server.js",
"dev:livereload": "livereload ./dist/ -w 500",
"dev": "concurrently -k -p \"[{name}]\" -n \"TypeScript,App,LiveReload\" -c \"yellow.bold,cyan.bold,green.bold\" \"yarn dev:tsc\" \"yarn dev:watch\" \"yarn dev:livereload\" "
},
Note that you need to include the following <script> tag in your .html files to make livereload work
<script>
document.write(
'<script src="http://' +
(location.host || "localhost").split(":")[0] +
':35729/livereload.js?snipver=1"></' +
"script>"
);
</script>
This was enough to make my small Fastify project run, your milage may vary.
Yes, there is the fastify-cli module for that:
https://github.com/fastify/fastify-cli
it has the --watch option that you can use to live reload your backend on file changes.
In your package.json add this script:
"dev": "fastify start -l info --watch --pretty-logs app.js",
Note that app.js must expose this interface:
module.exports = function (fastify, ops, next) {
next()
}
I need to build My React NextJS Project on local to host it at Appache server, when I run command run build it did not generate build folder.
I R & D on it, everyone recommend ZEIT – Next.js build with Now but it build project on cloud but I need a build for my local appache server. So please help me out.
Here is an my of package.json:
......
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
......
After so many struggle, I found answer of my question I have to add following line in my package.json under scripts:
"scripts": {
......
"export": "npm run build && next export"
.....
},
Basically I my case, npm run build && next export was complete required command to build NextJS project. So after adding this into package.json you just need to run in terminal:
npm export
and it will generate complete build for nextjs project.
You have a package.json script called build that runs next build. The next build command by default builds the app for development, which doesn't create a production bundle.
In order to create the production bundle on your local machine, you need to specify that you're on production environment through NODE_ENV=production (this is done automatically in now and other deployment servers). Basically, your package.json would end up:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "next start",
"prod:build": "NODE_ENV=production npm run build"
},
You can replace npm run build with next build directly if you prefer that.
My webapp consists of two modules from separate git repos, with the following directory structure:
webapp/module1
webapp/module2
module1 depends on module2, so I've added the link:
cd webapp/module1
npm link ../module2
The module1 is main module, so I'm running webapp using npm start from there:
cd webapp/module1
npm start
start is configured in module1's package.json as follows:
{
"scripts": {
...
"start": "webpack-dev-server --open --progress --colors & npm run build:css -- -w",
"build:css": "node-sass src/style/main.scss dist/webpage.min.css --output-style compressed"
}
}
The problem is when I make a change to module2 source code editing its javascript sources - the change is not applied immediately to the running webapp instance. I need to execute npm run build manually:
cd webapp/module2
npm run build
build is configured in module2's package.json as follows:
"build": "cross-env WEBPACK_ENV=prod && npm run v:patch && webpack"
Only after this step the changes are applied to the webapp. Is there a way to get such changes to be applied automatically? I'm using npm version 5.6.0.
I'm having the same issue as this question which wasn't really resolved as the original questioner abandoned this route. I'm trying to run a node app on Azure using Babel6. The package.json file I'm using has the following in it:
"scripts": {
"start": "node ./node_modules/babel-cli/bin/babel-node.js server.js"
}
I've checked using the Azure console and the babel-cli node module is installed and the server.js file is in wwwroot. Despite this I get the following when I commit to Azure:
remote: Start script "./node_modules/babel-cli/bin/babel-node.js
server.js" from package.json is not found.
The npm version running on Azure is 3.10.3, node version is 6.6.0. Can anyone advise on how to get this up and running. Any help much appreciated!
It seems that to run node.js applications in ES2015 on Web Apps. We need to compile them to ES5 version, you can leverage Custom Deployment Script to achieve this.
Here is example repos on GitHub, which leverages gulp and custom deployment script to compile the node.js from ES6 to ES5 via the Azure deployment task.
Specially, this example defines several scripts in package.json for the deployment task calling:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "gulp nodemon",
"build": "gulp build"
},
And manually call the npm scripts in deploy.cmd before KuduSync task move the deployment folder to production folder.
:Deployment
echo Handling node.js deployment.
:: 0. Select node version for build
call :SelectNodeVersion
:: 1. Install build dependencies
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! install --production
IF !ERRORLEVEL! NEQ 0 goto error
popd
:: 2. Run build command
pushd "%DEPLOYMENT_SOURCE%"
call :ExecuteCmd !NPM_CMD! run-script build
IF !ERRORLEVEL! NEQ 0 goto error
popd