I've been ask to take on a react project by a client and I'm struggling to understand how to prepare the files for hosting. I've used npm / webpack before, and I can see in the package.json the following:
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --config server.config.js && webpack --mode development && nodemon server.js",
"watch": "webpack --mode development --watch",
"start": "webpack --mode production --config server.config.js && node server.js",
"heroku-postbuild": "webpack --mode production"
},
Also within the webpack.config.js file I have this:
output: {
path: path.join(__dirname, "dist"),
filename: "bundle.js"
},
I've run 'npm run heroku-postbuild'. This has led to a dist folder that gets created, which I expected would create the necessary compiled files to host on the server, however when I look in that directory all I get is a single 'bundle.js' file along with fonts and image assets.
What's confusing me is that there are zero generated HTML files.
Since I've not hosted a react site before, I'm not sure if this is what should be expected and if so, how do I set up hosting for this?
Thanks
By default, webpack does not create an index.html file for you. There are two main routes you can go:
Create your own index.html by hand, which loads your bundle.js with a <script> tag. Place this in a folder called public (or static -- the name isn't important), and then copy this into your dist folder at build time. This is easier in the short term.
Use the HtmlWebpackPlugin, which will generate an index.html file for you automatically, as part of the webpack build process. This is probably easier in the long run.
Related
I have two API in node js using babel and I have a package.json commands to use to make the application working this is the commands:
"build": "del-cli dist/ && babel src -d dist --copy-files",
"serve": "cross-env NODE_ENV=production node dist/index.js",
"start:noupdate": "cross-env NODE_ENV=development babel-node src/index.js",
"start:serve": "cross-env NODE_ENV=production node dist/index.js",
I have two domains one is https://api.website1.com.br and another is https://website2.com.br/api.
They have the same env file name but with another data for each database, that is .env.production and .env.development
When I make this "yarn build", my Linux execute this command :
"build": "del-cli dist/ && babel src -d dist --copy-files",
And this is working fine when I try to put in production mode on my real webservers, i go to the folder from the project and run this command to make the app online with PM2:
pm2 start npm -- run-script start:serve NODE_ENV=production
That will make this command work:
"cross-env NODE_ENV=production node dist/index.js"
The app runs just fine, but I have a problem he only runs one and doesn't create a new PM2 APP he just restarts what I start.
Example if I go to the folder in my https://api.website1.com.br and run this command first in this he starts, but I go to the another he doesn't start that but reload my already early app don't create a new one, what I'm doing wrong?
I manage to work this using pm2 ecosystem, that I found in this documentation from http://pm2.keymetrics.io/docs/usage/application-declaration/
I configure the default file and put a name my APP:
module.exports = {
apps : [{
name: "app",
script: "./app.js",
env: {
NODE_ENV: "development",
},
env_production: {
NODE_ENV: "production",
}
}]
}
and use this command pm2 start ecosystem.config.js and now is working, I post here to know if someone has the same problem
so my webpack has been working fine. I needed a different structure then the default so I placed the webpack files in a build folder. As per documentation I placed the --config option in the package json but I am still not able to access the file in the debugger.
Below is my setup:
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"local": "webpack-dev-server --inline --progress --config build/webpack.local.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"build_dev": "node build/build.dev.js",
"build_stg": "node build/build.stg.js",
"build_prod": "node build/build.prod.js",
},
When I run the command node-nightly --inspect ./node_modules/webpack/bin/webpack.js
I get the error:
No configuration file found and no output filename configured via CLI option.
A configuration file could be named 'webpack.config.js' in the current directory.
In terms of my file structure I have under the root, a folder named build it contains the webpack config files (I was not sure how the structure is written on SO)
Version usage:
"webpack": "^3.12.0"
node 9.3
--config is a property on webpack. You are trying to set a --config property on webpack-dev-server webpack-dev-server
You can move your devserver to your webpack.config.js file
devServer: {
inline: true,
progress: true
}
and then refer to your webpack.config.js file directly in npm like so:
webpack --config ./build/yourfile.config.js
you can give any name you wish to the config file if you are using --config property else webpack will always try to find webpack.config.js in your projects root directory.
ELSE
you can create a webpack.config.js in your root and switch between config version on runtime like so:
//webpack.config.js
const TARGET = process.env.npm_lifecycle_event;
if (TARGET === 'build') {
module.exports = require('./buildScripts/webpack.config.dev');
}
else if (TARGET === 'build:prod') {
module.exports = require('./buildScripts/webpack.config.prod');
}
and in package.json you need the appropriate targets to match npm_lifecycle_event.
//package.json
"scripts": {
"build": "webpack --watch",
"build:prod": "webpack",
}
I'm lost. I've been following a Udemy Webpack 4 tutorial on webpack and I am stuck on having different configs for different modes.
I can build from my production config just fine, but when it comes to running the node server, it's not set to production.
I have my main.js write this:
console.log(`Environment is: ${process.env.NODE_ENV`}
and I have only seen it in show as Development.
Here's my package.json's script to run production: I run npm run build and then npm run prod
"scripts": {
"build:dev": "webpack --config=config/webpack.dev.js",
"build": "webpack --config=config/webpack.prod.js",
"dev": "nodemon --inspect --watch config --watch src/server
src/server/main.js",
"prod": "cross-env NODE_ENV=production node src/server/main.js"
},
It was mentioned that I needed to define NODE_ENV in the webpack prod config in the plugin section. Here is how I have it:
new webpack.DefinePlugin({
'process.env': {
NODE_ENV:'"production"'
}
}),
I've tried it in different ways: 'process.env': {'NODE_ENV': JSON.Stringify("production")} and a couple of other ways and I have had no luck.
Here is my repository to see my complete config: https://github.com/PepperAddict/webpack-express
I would appreciate any help even recommendation on a better way to set this up. Thank you in advance!
Below is mine config using webpack 4
"prod": "webpack -p --mode=production --config webpack.prod.js",
"start": "webpack --mode=development --config webpack.dev.js",
And if you want to set NODE_ENV you can do like this
"prod": "SET NODE_ENV=production& webpack -p --mode=production",
Hope that help
I finished a small canvas based game and I would like to upload it to the web via Heroku.
All the code is written at the Src directory and I bundle it to the dist directory via Webpack. I then use a simple express server to serve the static files.
This is all there is to it:
On development mode this works just fine. However, when I upload to Heroku I get "Cannot GET /".
I tried several option to make this work but for some reason I'm not able to fix this.
I did try to write this as well:
app.get('/', (req, res) => {
res.sendFile('index.html');
}
or some variation of this but to no avail.
This is the scripts part of my package.json:
"scripts": {
"start": "node server.js",
"dev": "webpack --watch",
"prod": "webpack --config webpack.production.config.js -p"
}
When I run on development I use "npm install" followed by "npm run prod" to bundle to 'dist' and then "npm start".
What am I missing here?
Thanks!
I want to setup nodemon to run the "prestart" script when server restarts, the reason, I'm using webpack and I want to build bundle.js every time a file changes, I'm not using webpack-dev-server cause I don't know how to set it up with an existing node app running, I got my backend on node.js, help on that will be appreciated.
The way I've been working is: run npm start every time I make a change on the code, but that too much effort.
Here's the scripts object at package.json so that you have an idea of what's going on:
"scripts": {
"bundle": "webpack --config webpack.config.js",
"prestart": "npm run bundle",
"start": "node server.js"
}
The way I've accomplished to do that is by creating a nodemon.json file with the exec property:
{
// ... Other conf (see an example in https://github.com/remy/nodemon/blob/master/doc/sample-nodemon.md)
"watch": [
"app" // Set your directories/files to watch
],
"exec": "npm run prestart && node server/index.js"
}