I have seen a question with a very similar title on SO from 3 months ago but it has no answers.
After a fresh laravel 9 installation what are the minimum steps to put the laravel application into it's own directory, and also modify the public directory name? It would be handy to have a step by step guide with laravel 9 specific one as I can't seem to find one anywhere.
eg. the following root directory structure:
laravel-app/ (contains all laravel files like resources/ and storage/)
public_html/ (contains index.php and /js etc)
Using the old process (similar to this https://github.com/hannanstd/change-laravel-public) I have always used no longer works, and this seems to have something to do with vite that laravel 9 uses instead of laravel-mix. It works up to the point of running php artisan serve but fails when running npm run dev with vite. Giving this error:
$ npm run dev
> dev
> vite
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency
pre-bundling.
node:internal/fs/utils:347
throw err;
^
Error: ENOENT: no such file or directory, open 'public\hot'
at Object.openSync (node:fs:594:3)
at Object.writeFileSync (node:fs:2207:35)
at Server.<anonymous> (D:\Websites\laravel9-admin\laravel-core\node_modules\laravel-vite-plugin\dist\index.js:122:34)
at Object.onceWrapper (node:events:627:28)
at Server.emit (node:events:525:35)
at emitListeningNT (node:net:1466:10)
at processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'public\\hot'
}
So it seems that yet somewhere else the default "public/" is defined, but after searching with ctrl+shift+F in my project it doesn't seem to be anywhere that matters so really unsure where it's getting it from. Any help is highly appreciated, but really a step by step guide on how to achieve this for Laravel 9 is the end goal so it can be a reference for myself and other users with the same problem :)
Answering this myself as found the solution!
First Option: Just rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: 'public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Second option: Seperate out the laravel core files into their own directory and also rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Create a laravel-core directory and move all files and folders except public_html into the laravel-core folder.
Edit index.php in public_html folder and find/replace __DIR__.'/../ with __DIR__.'/../laravel-core/ (3 cases)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/../public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: '../public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Related
my team is migrating to rush and I had a problem while setting it up: I'm getting a weird error when trying to add any 3rd party lib (let's say react) to package.json using rush add --package react (for example). The error log:
Found configuration in /home/ivan/dev/JS/eisbuk/rush.json
Rush Multi-Project Build Tool 5.66.2 - https://rushjs.io
Node.js version is 14.19.0 (LTS)
Found configuration in /home/ivan/dev/JS/eisbuk/rush.json
Starting "rush add"
Determining new version for dependency: react
No version selector was specified, so the version will be determined automatically.
Trying to acquire lock for pnpm-6.32.3
Acquired lock for pnpm-6.32.3
Found pnpm version 6.32.3 in /home/ivan/.rush/node-v14.19.0/pnpm-6.32.3
Symlinking "/home/ivan/dev/JS/eisbuk/common/temp/pnpm-local" --> "/home/ivan/.rush/node-v14.19.0/pnpm-6.32.3"
The "ensureConsistentVersions" policy is NOT active, so we will assign the latest version.
Querying NPM registry for latest version of "react"...
ERROR: The command failed with exit code 243
I tried to find a similar problem report related to rush and looked up the 243 error with npm, both to no avail. I'm using pnpm, however, the error persists with npm and yarn all the same (with yarn it's exit code 1, everything else is the same).
Here's my .npmrc (a default really):
registry=https://registry.npmjs.org/
always-auth=false
Interestingly enough, if I manually add a dependency to package.json and run rush update, the update goes well and the dep is added to node_modules and shrinkwrap (so it shouldn't be an npm registry problem).
Here's my rush.json:
{
"$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush.schema.json",
"rushVersion": "5.66.2",
"pnpmVersion": "6.32.3",
"pnpmOptions": {
"preventManualShrinkwrapChanges": true,
"useWorkspaces": true
},
"nodeSupportedVersionRange": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0",
"gitPolicy": {},
"repository": {},
"eventHooks": {
"preRushInstall": [],
"postRushInstall": [],
"preRushBuild": [],
"postRushBuild": []
},
"variants": [],
"projects": [
/** ...other projects */
{
"packageName": "#eisbuk/functions",
"projectFolder": "packages/functions"
}
/** ...other projects */
]
}
The entire repo can be found at: https://github.com/eisbuk/EisBuk/tree/feature/rush
Solved!
In the end, I've managed to pinpoint it to the node version. I was using v14.19.0 and bumping to v16.14.2 solved it. I don't know if it's a known incompatibility, but here it is.
After running the yarn build getting the dist folder. While running the index.html I am getting the white blank page.
File structure:-
:~/Desktop/web$ ls
babel.config.js docs node_modules public src yarn.lock
dist log package.json README.md vue.config.js
vue.config.js
module.exports = {
publicPath: "./",
chainWebpack: config => {
config.plugins.delete('prefetch');
},
devServer: {
host: 'localhost',
https: false,
port: 8080,
public: 'localhost'
},
}
Web Page Output:-
Console Output:-
OneSignalError.js:18 Uncaught (in promise) f: OneSignal: This web push config can only be used on https://example.com. Your current origin is http://localhost:8080.
at Function.checkRestrictedOrigin (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:243516)
at Function.<anonymous> (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:243076)
at Generator.next (<anonymous>)
at r (https://cdn.onesignal.com/sdks/OneSignalPageSDKES6.js?v=151508:1:716)
GET http://localhost:8080/sockjs-node/info?t=1632898657676 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1632898659676 net::ERR_CONNECTION_REFUSED
GET http://localhost:8080/sockjs-node/info?t=1632898662675 net::ERR_CONNECTION_REFUSED
The problem is that you are testing OneSignal with your local server from Vue, but you have entered in the OneSingal configuration corbid360.com as your URL. What you have to do to test OneSignal is to change the URL inside of the OneSignal dashboard to the local server from your Vue project. Once you have tested it in your local environment, you can change it back to corbid360.com
Most likely the reason is that you need to specify to OneSignal that you are using localhost.
Select Typical setup
Enter your localhost URL
Enable Local Testing
(Treat HTTP localhost as HTTPS for testing)
Come join us in our discord server and learn more about our community and OneSignal: https://onesignal.com/onesignal-developers
I had spent a lot of time on this issue, at last, I got the solution. on list post https://stackoverflow.com/a/60239175/13178120. if you are getting this type of error you can go through with the above link.
I have a project that's been running perfectly for a few months now, able to run npm run serve with no problem. I have to terminate and run the command again whenever I switch networks, but that has never been a problem and the server could always start again.
Until now - no matter what I do I can't get the server to start. I get this error:
npm run serve
> xbs#0.6.2 serve D:\workspace\[PROJECT]
> vue-cli-service serve
INFO Starting development server...
10% building 1/1 modules 0 active ERROR TypeError: Cannot read property 'upgrade' of undefined
TypeError: Cannot read property 'upgrade' of undefined
at Server.<anonymous> (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:667:47)
at Array.forEach (<anonymous>)
at new Server (D:\workspace\[PROJECT]\node_modules\webpack-dev-server\lib\Server.js:666:22)
at serve (D:\workspace\[PROJECT]\node_modules\#vue\cli-service\lib\commands\serve.js:137:20)
at <anonymous>
at process._tickCallback (internal/process/next_tick.js:188:7)
at Function.Module.runMain (module.js:695:11)
at startup (bootstrap_node.js:191:16)
at bootstrap_node.js:612:3
The last time I got this message was when I forgot to set the .env files, but this is a previously working copy with all necessary files set, and no changes since the last working run.
I've even tried pulling a fresh copy of the repo, running npm i and setting all env files but it still fails.
npm run lint and npm run build can still work, only npm run serve.
Am I missing anything?
The problem was again with the .env files. My vue.config.js was trying to access a previously set environment variable that had since been removed.
Only strange thing was that there weren't any problems up til now?
I guess your devServer.proxy.target is empty!
You could set this configuration
For me it was that I forgot to create (or copy from another PC) the .env file after clone and try to run my project on another PC.
I also had this problem.
I used in the project process to get the backend address(for example):
devServer: {
proxy: {
'/api/back/*': {
target: process.env.VUE_APP_BACKEND_URL,
pathRewrite: {
'/api/back': '/api/back',
},
},
},
},
But there was no .evn file.
Just create .env file:
VUE_APP_BACKEND_URL= 0.0.0.0:2222 #example
Didn't notice the answer #Sergey.
I declared this environment variable in .env.dev, but the local build failed, and the same project ran without problems, so I created a new .env file and declared it in it
proxy: {
'/api': {
target: process.env.VUE_APP_PROXY,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
I've installed npm (v4.4.4) and babel (v6.24.0) and babel preset 2015.
All running OK when converting ES6 JS to ES5...except a couple of oddities. Maybe someone can see what this newbie is doing wrong.
1) I run babel from npm (see below) which runs OK. I added some script entries into package.JSON to make it work.
But, UNWANTED oddity...npm inserts the commands into the output JS file. (See below) Is there an npm option to say, don't put the command in the output file.
Yet....if I copy input.JS to the folder with babel.cmd and run it there, I get a clean output.JS. So it looks like npm is inserting the command lines into the output.js file.
How do I prevent the npm commands being written to output.js. (Obviously I don't want to have my JS files having to share a folder with the .bin files)
2) When I type > babel on the command line in my project folder, I get:
babel: not a command.
I EXPECT THIS. After all, I have not added node_modules/.bin to my PATH env var. Yet every YouTube video I watch about npm and babel, it works. How? No one seems to edit the PATH env var. Am I missing something?
Thanks
Milton.
INPUT JS FILE (input.js)
class House {
constructor(v) {
this.name = v;
}
}
OUTPUT JS (TRANSPILED) FILE (output.js) Note 1st 2 lines below...
> milton#1.0.0 babel C:\Projects1\01InstallReact4Dev
> babel.cmd "--presets" "es2015" "input.js"
"use strict";
function _classCallCheck(instance, Constructor)
{ if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var House = function House(v) {
_classCallCheck(this, House);
this.name = v;
};
PACKAGE.JSON
"scripts": {
"babel": "babel.cmd",
"babelv": "babel.cmd -V",
"babelh": "babel.cmd -help"
}
COMMAND
> npm run babel -- --presets es2015 input.js > output.js
Thanks Again.
Milton.
You're redirecting the output of stdout to the file output.js, this includes everything that is displayed. Instead of using the stdout output of babel you can use the --out-file or -o option. This will write the output to the specified file instead of printing it to stdout (see Compile Files).
Your command would be:
npm run babel -- --presets es2015 input.js --out-file output.js
When I type > babel on the command line in my project folder, I get: babel: not a command.
You don't have node_modules/.bin/ in your shells PATH. You could add it or run it directly with ./node_modules/.bin/babel. But this is not necessary if you do it in an npm script, because npm will automatically look into node_modules/.bin/ without it being in your PATH. In this case you could define the following script:
"scripts": {
"build": "babel --presets es2015 input.js --out-file output.js"
}
And then you can simply run:
npm run build
If you'd like to transpile more than one file you should use --out-dir instead of --out-file otherwise they will be concatenated into one file. See also Compile Directories
I'm having some issues on Windows env. with npm & a package.json, mainly with one of the devDependencies, concat-cli.
Here's a little sample of the package.json file:
...
scripts{
...
"js-vendor-concat": "concat-cli -f src/js/vendor/**/*.js -o dist/js/vendors.js",
...
}
....
"devDependencies": {
...
"concat-cli": "^4.0.0"
...
}
So what happens is that every time I run that script in Windows env, I get Error: Error: EISDIR: illegal operation on a directory, read at errorHandler (index.js:11:15). Thing is that on linux, this error doesn't come up.
Things tried so far:
used git-bash and cygwin but same outcome
changed the input path to: src/js/vendor/*.js, again same outcome
However if I specify the name of the file, it works, so I'm guessing its something related to that wildcard *.js selector?
Any tips or pointers are much appreciated, thanks!