I'm using webpack and heroku.
When I push my web to heroku it will restart and do "npm run start".
What I want to do is doing "npm run start" with "npm run build" when I push my web to heroku
here's my pakage.json
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start": "set NODE_ENV=production webpack --progress --hide-modules&&node server.js"
},
What I tried is this but, not working
"start": "set NODE_ENV=production webpack --progress --hide-modules&&node server.js"
Update:
Maybe your scripts isnt working in heroku because, by default they are running linux and you are triyng to run the "set" command that belongs to windows. Try removing it form the script and let cross-env do all the rest of the work for you :)
Previous response:
I know this isnt the best solution, but I hope it helps you:
If the problem is in the concatenation of commands to run, you can install "npm-run-all" to your project and then you will be able yo run several scripts in secuential order.
In your case, you could set the scripts like this:
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --hot --open --inline",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
"start": "set NODE_ENV=production webpack --progress --hide-modules",
"run-server": "node server.js",
"build-sart-n-run": "run-s build start run-server"
}
After that you can run ,either via Heroku CLI using a procfile or using the tools that the web UI gives you when you login, the next command:
$ node build-sart-n-run
sorry if my english inst very good :)
Related
I am trying to host my react app with a NodeJS server on Heroku, but I keep getting H10 Error, can someone please help resolve it.
Our nodeJS server seems to be working fine Node Server endpoint but not the React app.
Here is the code for scripts in the package.json file. I guess I got the scripts wrong. Any help or guidance would be greatly appreciated.
"scripts": {
"start": "concurrently npm:server npm:dev",
"local": "concurrently npm:server npm:dev",
"dev": "react-scripts start",
"build": "node ./scripts/build.js",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postinstall": "node ./postinstall.js",
"server": "nodemon server/server.js",
"heroku-postbuild": "npm install && npm run build"
}
Im i'm assuming correctly there are two sets of package.json files and that your express server is serving up client files.
There should be one package.json in your server folder, and one in the client.
In my heroku projects I have this line of code in my server package.json to allow deployment.
"heroku-postbuild": "npm install --prefix client && npm run build --prefix client"
let me know if that solved the issue!
I know that I need to run npm run build to build my assets so they are minified for the web. My problem is I'm missing the script in my package.json file and I don't know what the correct code is for this.
package.json:
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
After I run the command it should create the dist folder. This is what I need. I'm not sure why my project is missing that script.
You can check the Laravel Mix section of the documentation.
As it states:
Mix is a configuration layer on top of Webpack, so to run your Mix
tasks you only need to execute one of the NPM scripts that is included
with the default Laravel package.json file:
// Run all Mix tasks...
npm run dev
// Run all Mix tasks and minify output...
npm run production
This will generate your files in the public directory, by default:
/public/js/app.js
/public/css/app.css
Of course, you can customize this in the ./webpack.mix.js to do a bunch of other operations (like copying files, customizing the Webpack config, extracting vendors, etc) that you can see in the docs.
I'm a beginner in Vuejs , i've make a project and now i want to deploy it ,
i've tried to run
npm run build
like in Ember js and other js front end frameworks normally it will create a dist folder that contain my source code but i could not do that because the build script is not defined in the Vuejs which came with Laravel .
and i also tried to compress the project and upload it to my server and run it like other normal Laravel project but always Vuejs code not working, is there a specific way to deploy it ?? i've tried to search but i didn't find the solution
Your available scripts can be seen in package.json in the main laravel app folder.
There you should see something like:
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
Use npm run production for production builds and npm run dev for development builds.
In your webpack.mix.js file in the main folder, you can define your webpack configuration and therefore deployment settings. Have a look at https://laravel.com/docs/6.x/mix for details.
If you leave the standard implementation, your resources/js/app.js will be compiled to public/js/app.js.
You can include the file in your Laravel Blade template like this:
<script src="{{ mix('js/app.js') }}"></script>.
I'm using npm run watch watching assets for changes, and it works good except that it takes 10 seconds before it starts to listening for changes again after every compile.
So if I save a file it will successfully compile, but if I make changes and save again before 10 seconds passed nothing happens.
I expect the npm run watch to be ready directly after every compilation.
How can I debug this? I don't know if this is an issue with Laravel Mix or something else?
I'm using webpack and my VM has a Ubuntu system. My
This is from package.json:
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
webpack.mix.js
mix.js('resources/js/main.js', 'public/js/app.js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [ tailwindcss('./tailwind-config.js') ],
});
Struggling with Laravel 5.4 vagrant box on Windows 10, trying to get laravel-mix to work. My end goal is to set up a ServiceWorker and asset caching for a PWA (Progressive Web App), and must admit node, npm, mix/gulp are puzzling me. From what I see in forum posts, it is rather fragile technology, susceptible to breaks with any minor change or variation on the environment.
I get this error message 4 times when running "npm run dev" (once for each compiled js resource):
Module build failed: Error: Couldn't find preset "es2015" relative to directory "/home/vagrant"
at /home/vagrant/Code/laravel-basics/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
Here is my package.json:
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"development2": "./node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.16.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"bootstrap-sass": "^3.3.7",
"cross-env": "^5.0.5",
"font-awesome": "^4.7.0",
"jquery": "^3.1.1",
"laravel-mix": "^1.4.2",
"lodash": "^4.17.4",
"node-sass": "^4.5.3",
"sw-precache-webpack-plugin": "^0.11.4",
"vue": "^2.1.10",
"webpack-rtl-plugin": "^1.5.0"
}
}
The latest attempt was running vagrant from an Administrator Command prompt before doing "rm -rf node_modules && npm install" (or its equivalent). I don't like this but the npm install went a lot smoother than with "--no-bin-links" options. I also tried yarn instead of npm install.
That should fix it. Don't forget to include a .babelrc with
{
"presets": ["es2015"]
}
I tried many things but it seems the combination of
Running Vagrant/Homestead as Administrator in command prompt
Installing es2015 globally, in addition to --no-bin-links
Restarting the VM so the global install with environment changes takes effect
THEN, npm run dev
did the trick. I tried this sequence on a new laravel project on the same machine. Hopefully it will also work when I destroy my VM and redo this...