I am new to app development so I'm sure this is an easy question for you seasoned pros out there.
I have a simple MERN stack app running in development using concurrently to run both the front-end and back-end. Before I deploy my app to Heroku I wanted to validate that it will run with the Heroku command line "Heroku local web". This successfully starts my server and connects my database but it does not start the front end at all. I think this may be something wrong with my package.json scripts but I have tried everything. My scripts are as follows:
"scripts": {
"install-client": "cd client && npm install",
"start": "node server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start",
"dev": "concurrently -n 'server,client' -c 'red,green' \"nodemon server.js\" \"npm run client\"",
"heroku-postbuild": "npm run install-client && npm run build",
"test": "echo \"Error: no test specified\" && exit 1"
},
I suppose you run your app on your local machine with npm run dev but according to heroku's documentation here they start your app with npm start unless specified otherwise by a file named Procfile in your app’s root directory.
The start script in your package.json file indeed runs only the server (node server.js).
Try copying the content of the dev script to the start script, or adding a file named Procfile with the single line:
web: npm run dev
or whatever command you use, in your app’s root directory.
Related
I have my notifications working locally, but once deployed to production, it's not showing anything in the console.
#pushonce('custom-scripts')
<script>
Echo.private('App.Models.User.' + #js($user->id)).notification((notification) => {
console.log(notification); <---nothing printed in console on production.
#this.call('addNotification', notification);
});
</script>
#endpushonce
If I open the console on production and type Echo it sees it, so I know Echo is imported or whatever.
My app is deployed on Laravel Forge. I've run the following commands on prod:
php artisan config:clear
php artisan cache:clear
composer dump-autoload
php artisan optimize:clear
Nothing seems to have any impact.
Also, I'm aware that Livewire has listeners for Echo, but this is the only way I was able to get things working locally.
UPDATE
I use Github actions for my CI/CD pipeline, and within my actions I'm running the following scripts, which I thought would be enough, but perhaps not:
- uses: actions/checkout#main
- name: Copy .env
run: php -r "file_exists('.env') || copy('.env.example', '.env');"
- name: Install Dependencies
run: composer install -q --no-ansi --no-interaction --no-scripts --no-progress
- name: Generate key
run: php artisan key:generate
- name: Directory Permissions
run: chmod -R 777 storage bootstrap/cache
- name: Install dependencies
run: npm install
- name: Compile assets
run: npm run production
- name: Execute tests (Unit and Feature tests) via PHPUnit
run: vendor/bin/phpunit
I thought I would post my build scripts as I don't think I've ever really paid much attention to them, and I'm not sure if they're set up right. I also don't have an npm run build script, and don't know what I would put in it:
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
UPDATE:
I ran npm run prod and npm run production locally, which theoretically should produce the same bundle I'm seeing in production, and I got the same result locally, i.e. I'm seeing the notification logged to the console. So it doesn't appear to be related to my build script.
Also, Echo is making it into the production build because I can call it from the console in production. So there has to be some other reason why it's not working.
Echo is a JS lib and i suggest that you have to build your scripts before you deploy. If your build your javascript in your pipeline make sure that your pipeline run the npm build command.
Add this to your Laravel Forge deployment script:
npm ci
npm run build
so i am trying to run sass with yarn start at the same time.
when i run yarn build:sass in command line , it triggesr the sass watch and if I make any changes into the sass it will update the css file however it wont start the project "yarn start doesnt work" is there anyway for me to run it all in one console?
"build:sass": "node-sass src dist",
"watch:css": "yarn build:sass && yarn build:sass -- -w && yarn start",
"start": "PUBLIC_URL=/ react-scripts start",
for anyone out there u can run this using run all
install the package first and then have it run after
start": "npm-run-all -p watch:sass start:react"
I'm trying to deploy my React+Node application to Heroku. I'm using Git as well.
The CMD keeps running this code and never stops:
remote: > npm run build
remote: > reactexpress#1.0.0 build /tmp/build_cd43acb7
On the Heroku log it shows "Build in progress".
I followed the instructions step by step a few times.
My scripts:
"client-install": "cd client && npm install",
"start": "node server.js",
"build": "npm run build",
"heroku-postbuild": "cd public && npm i && npm run build",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
From your scripts, your build command looks like:
{
"scripts": {
"build": "npm run build"
}
}
As we can see your build command calls build command, which then calls build command and then... You see where is the issue?
So to sum up, you need to update the build command to actually do something (not just calls itself) or just remove it if you don't wish to build anything.
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 am using the following logic within my package.json file for a webpack project:
"scripts": {
"dev": "webpack --mode development",
"build": "webpack --mode production ",
"clean": "rm -r deploy",
"start": "npm run clean && npm run dev && webpack-dev-server --mode development"
},
If my deploy directory does not exist, and I run npm start, I get the following message in my terminal:
rm: cannot remove 'deploy': No such file or directory
Is there a way to check if the directory exist first? And if does, then just skip the clean process?
Its better to use clean-webpack-plugin
but here you can also use rm -rf deploy.