im new in laravel and vue. i've been trying to use browsersync in server but no luck. successfully setup in my local but when i try to set in server its just not working. so i want my website to auto reload when there is new component update on server and im using cloudflare to purge new update after push to git and pull to server. can anyone give me a example to setup in production server? if its only possible for local dev, any suggestion about it? sorry for bad english.
my code now in webpack.mix.js
mix.browserSync({
open: false,
files: [
'app/**/*',
'public/**/*',
'resources/views/**/*',
'routes/**/*'
]
})
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css');
and this in my blade
#if (getenv('APP_ENV') === 'local')
<script id="__bs_script__">//<![CDATA[
document.write("<script async src='http://HOST/browser-sync/browser-sync-client.js?v=2.18.6'><\/script>".replace("HOST", location.hostname));
//]]>
</script>
#endif
thanks for your help sensei!
Related
My Laravel web application domain is like www.mywebsite.com/my-project/public and I don't want to change.
I installed Vue.js by npm install && npm run dev and try to reference app.js by
<script src="{{mix('js/app.js')}}"></script>
but I got error www.mywebsite.com/js/app.js net::ERR_ABORTED 404 (Not Found)
I try to config path in webpack.min.js
mix.js('my-project/resources/assets/js/app.js', 'public/js')
.sass('my-project/resources/assets/sass/app.scss', 'public/css');
but I think it's not way to fix...
Please help me thank you.
You may do so by adding a mix_url configuration option to your application's config/app.php configuration file:
'mix_url' => env('MIX_ASSET_URL', null)
Reference
I'm struggling with deploying a web app to Heroku. Everything seems fine, there are not errors shown, but I only get a blank page.
I've been searching around the internet and tried everything I saw but can't seem to find the answer.
server.js:
app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
);
folders:
I don't know what else to attach, just tell me and I'll provide it. Thank you very very much in advance, this is really really important to me
Generally,
If you want to deploy your entire MERN app to Heroku, first you add a heroku-postbuild script to package.json
In your case, since you have directories frontend, backend containing the client and server respectively.
Add these scripts to your package.json, these scripts will build your react frontend after the push to heroku.
...
"scripts": {
"install-client":"cd frontend && npm install"
"heroku-postbuild": "npm run install-client && npm run build"
}
...
Now in your server.js file,
...
const path = require('path');
app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});
...
Now, if you need to use Client-Side Routing (React Router) update / to /* as shown below,
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});
I think this should resolve the issue.
Refer: https://create-react-app.dev/docs/deployment/
Are you trying to deploy both the backend and frontend together from heroku?
In the past I've used heroku for my backend and used netlify for deploying my frontend
We made a little change on our Laravel project structuere. We made a file 'Larvel' inside the project. To make it work we changed the path in 'index.php' :
require __DIR__.'/laravel/vendor/autoload.php';
$app = require_once __DIR__.'/laravel/bootstrap/app.php';
So the Command php artisan serve isn't working. Due to this problem our vue component isn't updating.
We are running it on local server using xmapp
We want to keep the project structure as it is, and need a solution.
$npm run watch
$npm run watch --pull
$npm run dev
$npm run production
webpack.mix.js =>
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css');
Main view file where all js & css files are linked in ->
master.blade.php
<script src="{{ asset('/') }}js/app.js"></script>
We expect if any changes we make in our vue component after running npm run watch then the update will show on our browser.
public/js/app.js has moved in root folder
You can use version.
mix.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'public/css').version();
<script src="{{ mix('js/app.js') }}"></script>
I am new in vuejs and I am using vuejs in laravel
this is working and showing component but after making refresh
the page what can I do to see changes with out refreshing page?
these are what I have done
in Webpack:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
in my html file:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
commands:
npm run dev
npm run watch
You want to learn how to make single page application (SPA) which does not refresh the page but update the content according to the route.
https://laravel-news.com/using-vue-router-laravel
You will have to learn vue, vue-router to make SPA. when you get some experience then learn Vuex also.
I just had the same issue and struggled for a couple of days, the problem is the webpack mix configuration: this is what worked for me, but take care to remove the host in case you're not working with Laravel Homestead, if you are just leave it as it is and change the proxy value to your site local url.
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')
.browserSync({
host: '192.168.10.10',
proxy: 'mysite.test',
open: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'resources/js/**/*.vue',
'packages/mixdinternet/frontend/src/**/*.php',
'public/js/**/*.js',
'public/css/**/*.css'
],
watchOptions: {
usePolling: true,
interval: 500
}
});
Note: I think it was a sort of a bug in NMP, but the first time I tested this config, it it didn't work. What I did was to remove the polling part, ran
npm watch-poll, stop the watching and then added again the polling settings and ran simply npm run watch and workied like a charm!
EDIT
Btw, there is small issue with this config, you have to save twice for the browser to see the changes
Hope It helps!
-Hugo
You just need to run command into your terminal:
npm install
npm run dev
npm run watch
and will see changes continuously :)
I want to setup browserSync with laravel. I have a virtual host on local machine http://site.localhost.
According to the manual I put this into my gulpfile.js:
mix.browserSync({
proxy: 'site.localhost'
})
So when I run gulp watch I got http://localhost:3000 open with just infinite loading. So what did I do wrong?