I am developing a Laravel-Vue app using Laravel/Homestead. The Vue code is compiled using laravel-mix, all using fresh installs (it's a new project).
I would like to be able to test my Vue components 'outside' of the Laravel project. So I figured I just
1) Add a script in package.json like this
"devser": "cross-env NODE_ENV=development webpack-dev-server",
2) Add an entry point main.js file in which I can run my components isolated
import Vue from 'vue'
import Example from './components/Example.vue'
new Vue({
el: '#app',
render: h => h(Example)
})
3) add a webpack.config.js file to configure webpack for this isolated app. I just took it from the vuejs template: webpack-simple and changed the entry point path.
So far, running the devser script does compile the code without errors, and apparently, the code is served at (webpack output)
Project is running at http://localhost:8080/
webpack output is served from /dist/
404s will fallback to /index.html
However, opening localhost:8080 gives an error: This site can't be reached, localhost refuses to connect. So I have been searching for a while and found things about devserver proxy's and stuff like that but I don't understand what I would need to add to my webpack.config.js.
Maybe good to note: I am not interested here in calling the Laravel backend from these Vue components, it is just for testing the components in an isolated way. My next step was to add Vue-storybook to the party to do this.
To summarize, I am looking for one codebase (Laravel + Vue on Homestead) where I can separately test the components. Any help would be appreciated.
EDIT: If I am not logged in to the vagrant machine, I can navigate to the project folder and run
npm run devser
which serves the project at localhost:8080 and this URL does work. So I have a workaround for now.
It sounds like you are running webpack-dev-server inside your Homestead box. If so, you need to forward port 8080 from your host to the Vagrant box:
https://laravel.com/docs/8.x/homestead#forwarding-additional-ports
Add this to your Homestead.yaml:
ports:
- send: 8080
to: 8080
Then, run vagrant reload --provision to apply the changes.
Now you should be able to view http://localhost:8080/
Related
I am having issues with a fresh installation using docker + laravel + vite.
I can currently load the blade template successfully, however, when I load my file in resources/js/app.js, it is failing as it cannot find the file.
In my blade template, I use #vite('resources/js/app.js') to load this file.
If I run npm run build it loads the file successfully, but if I am working with them by using the HRM npm run dev, laravel cannot find this file.
How can I resolve this? Should I move to mix for this?
Vite port was not exposed in my dockerfile. Now it works perfectly :D
The goal:
Make newly created Laravel6 projects' bootstrap assets layout work from Docker.
Symptoms:
Bootstrap assets work properly on local Laravel development environment (XAMPP -Apache- +Win10Pro), both the js and css are loaded well. But does'not work properly from local Docker (Win10-linux containers, Nginx+PHP+MySql+Redis), app.js and app.css runs on error 404.
Apache(local xampp):
Nginx(Docker):
What I did:
New Laravel project created, auth added, bootstrap, npm and node installed
properly.
Virtual Host settings (httpd-vhosts.conf) for Apache in xampp:
nginx.conf in nginx container
Virtual Host settings (default.conf) for Nginx in nginx container:
.htaccess file in my projectfolder /a_new_app_for_test/public/
docker-compose.yml for nginx
docker-compose.yml for app
What settings should I add/change in order to make assets loaded correctly?
I suppose it could be related to nginx settings compiled into Docker.
Any help are appreciated.
Thanks in advance.
Try to copy your whole project to the container volume, this way nginx will be able to see your files from public or resources folder.
volumes:
- ./:/var/www/
I'm developing project using vuejs and Laravel. everything worked fine on my laptop and when I upload code to server (Digital Ocean) at that first time.
Otherwise, when I update some Vue component in resources/components folder and upload it to server again. It's seem component is not update on the server when I refresh the browser.
my code in \ webpack.mix.js is
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
if (mix.inProduction()) {
mix.version();
}
and I try to run npm run dev or npm run prod on the server after I push the nw code on it as well. It doesn't work.
I also try to clear browser cache and reload url again, it doesn't work also.
Please give me an advice how should I do.
Regards.
Well its not a good idea to upload a laravel/vuejs project at shared hosting. Although doing such process can save your life.
Run php artisan serve view:clear
Do changes at your local file and then npm run watch.
after uploading all the changes to server, always replace public/css/app.css & public/js/app.js files.
I'm trying to deploy an application through Heroku which is just an index.html page with some javascript and css.
I've connected my Github repository to it as a deployment method, but it never seems to work.
Every time I type "heroku logs", it spits back out:
"npm ERR! missing script: start" first.
From what I've searched, it tells me that I need to add "start": "somefile.js" as a starting point in package.json, but this is a very simple index.html page with javascript invoked from whenever a couple buttons are pressed.
How am I meant to get past this?
Heroku isn't really built for hosting static websites that have no dynamic server backend. If you want to do that, you should look into using a proper static file host like Amazon S3, Netlify, etc.
However -- if you DO want to do this on Heroku, you can do so by creating a really simple application (here's an article which shows you how to do it using Ruby): https://devcenter.heroku.com/articles/static-sites-ruby
Agree with #rdegges, you need some sort of http server. A basic node http server is pretty trivial to implement as well.
A full tutorial is available, but the keys steps are:
Make sure you have [node, npm, heroku CLI] installed.
In the root of your project directory, run npm init - (this will create a package.json in your root project directory)
Run npm install --save express - (this will add express as a dependency to the package.json file)
Create a file named Procfile in the root directory.
(contents: web: npm app.js)
Create a file named app.js in the root directory. (contents below)
Commit your changes, push to Heroku - git push heroku master
That should do it. Make sure all your files are in a directory called public as specified in the app.js file or change that to reflect where they actually are.
app.js:
var express = require('express');
var app = express();
app.use('/', express.static('public'));
app.listen(process.env.PORT || 8080);
Full Tutorial: https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction
I'm trying to use browsersync with Laravel. I followed this tutorial from laracasts but my browsersync isn't syncing.
Here's my gulpfile:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass('app.scss');
mix.browserSync();
});
My app is homestead.app. So, after starting gulp watch, I go to homestead.app:3000 and see my app without BrowserSync.
I go to homestead.app:3001 and I can access BrowserSync dashboard, which shows this:
Local
http://localhost:3000
External
http://10.0.2.15:3000
Proxying:
http://homestead.app
Current Connections
Connected browsers will be listed here.
Local and external links not responding.
No matter what I did, I couldn't see any connection in Current Connections tab.
What I tried:
tried running gulp watch from my local environment instead of homestead.
This time both Local and external links were pointing to my app, but no syncing.
I'm using windows 8.1
Any help would be appreciated.
Well, after trying to achieve the desired result for couple of hours I decided to go with plain old gulp, rather than Laravel Elixir.
I removed the node_modules folder, cleaned up the default package.json and gulpfile.js files and customized them, then ran clean npm install.
After that, i used gulp watch on my local machine. Also, i went with LiveReload instead of BrowserSync.