I'm new to Vue but I really like it. Right now I have my own CMS based on Laravel. I want to build new CMS as SPA in Vue. But one thing is not clear to me. How should I separate assets for frontend and admin?
For example I would like to have COMPONENTS folder with another folder ADMIN - there will be only admin components.
I also don't want to have webpack building everything together.
I was thinking about solution like having multiple webpack commands:
npm run dev
npm run dev admin
But maybe I'm completely wrong...
If you want to have 2 different commands - you just need to specify different configuration files to webpack --config option
like:
package.json
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"dev-admin": "webpack-dev-server --inline --progress --config build/webpack.dev-admin.conf.js",
}
}
Another option is to use webpack`s "multiple pages" option. It would allow you to build 2 entry .js files and all of the chunks for both of your apps.
Take a look here: https://webpack.js.org/concepts/entry-points/#multi-page-application
And if you use Vue-cli - https://cli.vuejs.org/config/#pages
Related
I've been trying to diagnose an issue with pusher not working on production, when it works fine locally. This morning I discovered after tinkering around in the console, that when I do this on production:
Echo.private('App.Models.User.1');
I get this output:
which is the key from my development .env file:
PUSHER_APP_KEY=f9d9********011e
My production key shown in pusher is:
key = "07ae********2d4"
My production .env file also references this correct production key:
PUSHER_APP_KEY=07ae*********2d4
HOWEVER, that is NOT what's actually being used by the production application (see prior screenshot).
I'm not doing anything different from the "stock" implementation of importing pusher in my bootstrap.js file:
import Echo from 'laravel-echo';
window.Pusher = require('pusher-js');
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
After searching my codebase, I found that the key gets hard-coded into the public/js/app.js file when you run npm run dev locally. I verified this by changing the key in my .env file and running npm run dev which then updated the key reflected in the app.js file.
I then went out to my production site's FTP and downloaded the app.js file, and sure enough, the development key is hard-coded in the app.js file.
If I update the app.js file to reflect the correct key, and then run Echo.private('App.Models.User.1'); again, this is the output, which shows the correct key:
And also, notifications start working as expected after making that change. However, that's obviously problematic as every time I deploy, it will be overwritten by the dev value.
Could it be my build process? (also see this SO question I asked yesterday)
What the actual *** is going on here?
I've not had any other issues with npm not building things correctly (that I'm aware of), but it seems that the code in my app.js file must be getting generated via the .env file and somehow my production environment is not referencing the correct key?
Here are some details around my build process (I use Github Actions).
Here is my github actions .yml file:
steps:
- name: Set up MySQL
run: |
sudo systemctl start mysql
mysql -e 'CREATE DATABASE testdb;' -uroot -proot
mysql -e 'SHOW DATABASES;' -uroot -proot
- 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: Clean Install
run: npm ci
- name: Compile assets
run: npm run prod
- name: Execute tests (Unit and Feature tests) via PHPUnit
run: vendor/bin/phpunit
from my package.json file:
"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:
My public folder, and in turn my public/js/app.js file is getting pushed to source control. I just deleted it from my repo and pushed the code to production, and now I'm getting a jquery not defined error, which tells me that the app.js file isn't getting re-created during my build process.
UPDATE:
My .env file is not in source control, so the github action is using .env.example which has the variables but no values, and has a couple of other "mix" variables, which may be the problem.
PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_APP_CLUSTER=
MIX_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
MIX_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"
as mentioned earlier in the question, my bootstrap.js file is referencing those 2 MIX_PUSHER_* variables:
window.Echo = new Echo({
broadcaster: 'pusher',
key: process.env.MIX_PUSHER_APP_KEY,
cluster: process.env.MIX_PUSHER_APP_CLUSTER,
encrypted: true
});
I guess I need to set up a github environment variable for the app key for each environment?
UPDATE:
I found this SO answer that details how to create a github secret and basically put your whole environment file in it, but it's saying it's an invalid:
The environment file is invalid!
Failed to parse dotenv file. Encountered unexpected whitespace
The problem occurs from your js. It seems that you are using the development env in your js for production. Make sure that you are compile your js files for production in your live environment.
Trying to source data from API in order to querying that data from gatsby and display it, but 😶🌫️
gatsby develop
SyntaxError: Unexpected token 'export'
when:
./gatsby-node.js
sync function fetchWinesAndTurnIntoNodes() {
const res = await fetch('https://api.sampleapis.com/wines/reds');
const wines = await res.json();
console.log(wines)
}
export async function sourceNodes(params) {
await Promise.all([await fetchWinesAndTurnIntoNodes(params)]);
}
"The command we want to run is called gatsby build. But because we want to use es modules with gatsby, we use a package called esm. One way to require it is to set the NODE_OPTIONS environmental variable to -r esm. Finally to make this work for windows users, we use the cross-env package. Hopefully once Node es modules are stable, we can bring this back to simple gatsby build" Wes Bos.
So, install
npm i esm -D
npm i cross-env -D
then add to scripts at
./package.json
"start": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",
"build": "cross-env NODE_OPTIONS=\"-r esm\" gatsby build",
solved! 🚀
in my project symfony 4 I use all kinds of images.
I have static images for the decoration of the site. I put them in assets/images, and I generated them in the public/build/images with webpack-encore.
And these pictures, I manage their size with LiipImagineBundle
So I deployed my project on Heroku. It installs the bundles, the node_modules, generates the files with webpack-encore from the assets, and generates the database
composer.json:
"compile": [
"php bin/console doctrine:schema:drop --full-database --force --env=prod",
"php bin/console d:m:m",
"php bin/console d:f:l --no-interaction --env=PROD"
]
package.json:
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress",
"heroku-postbuild": "node_modules/.bin/encore production"
},
However when I go on the application from Heroku, the site works but the images that must be displayed through LiipImagineBundle are not. Instead I have a 500 error telling me that resources do not exist. And actually if I go in the section "Sources", in the public / build / images, there are missing images. Yet they must be generated because in local (in dev), everything works perfectly.
All my required bundle for prod are in "require" and not "require-dev". And I haven't devDependencies in my package.json, all is in 'depedencies'
Has anyone ever had the same problem?
You can used heroku-buildpack
It uses Composer for dependency management, supports PHP or HHVM (experimental) as runtimes, and offers a choice of Apache2 or Nginx web servers.
I have one laravel project where i'm going to have multiple backends, i need to do the same thing in frontend, another laravel project where i'm going to have multiple frontends in Vue using the laravel-vue integration, for example, inside resource/js folder to have frontend1, frontend2, etc. Is there any guide or tutorial about how to do this? How to make Folder structure inside resources/js, Laravel Mix configuration, etc.?
thanks!
I did this recently in a project where i created resources/backend/js and resources/frontend/js where i wanted the output to be in public/frontend and public/backend. I stumbled on some issues with the manifest file but got it working in the end.
You can do this by creating a new frontend.mix.js and change the output paths to
const mix = require('laravel-mix');
mix.setPublicPath('public/frontend')
.setResourceRoot('/frontend')
mix.js('resources/frontend/js/app.js', 'public/frontend/js')
.sass('resources/frontend/sass/app.scss', 'public/frontend/css')
You will need to create a few new command to use frontend.mix.js
"scripts": {
"frontend-dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --env.mixfile=frontend.mix --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"frontend-watch": "npm run frontend-dev -- --watch",
}
Inside the original webpack.mix.js file i changed the paths to backend and left the commands untouched.
Hope this helps you.
I'm making a simple html and CSS app. I need to my SASS changes to show up on the website LIVE as im developing.
And once all the SASS and development is complete I will run webpack -b and webpack should convert the SASS to CSS.
I'm sure someone has done this before. Thanks.
It looks like the problem stems from wrong output.publicPath config in webpack.config.js file. In order for live-reload to work, requests going to webpack bundles (e.g. app.css, app.js) should be handled by webpack-dev-server. For the repository you're referring to, this could be done by setting output.publicPath to "/build".
Run webpack-dev-server --inline on the command line after changing config file and then go to http://localhost:8080. Now the page should reload everytime you change and save a file.