Let me start of with the fact that im new to laravel and english is not my main language so dont mind my grammer. I have a project that has a laravel api with a vue front-end. The Laravel web routing redirects everything to a single blade file that contains the vue app. this way i can use the vue routing. This is has all been working fine for a while now but now im trying to build for production and ive run into the following issue.
after using npm run build to build for production laravel puts /build/ to every route im using through vue. This is very logical given that it uses the build folder in the public directory like it should. But its ofcourse verry ugly for the users. Is there a way to remove the /build/ from the url? (appart from redirecting /build/ to / in the .htacces file on the server)
You can set the environment variables in .env file for javascript using VITE_ prefix as below:
Please add the new environment variable in .env file as below:
VITE_BASE_URL="/"
Made the router related changes in your Vue file as below:
const router = createRouter({
history: createWebHistory(import.meta.env.VITE_BASE_URL || '/'),
routes: [
.....
],
})
Problem from import.meta.env.BASE_URL in vitejs, in build mode this import.meta.env.BASE_URL result "/build/" and development mode result, is "/"
I don't know where to change this, but I fix this problem with
const router = createRouter({
history: createWebHistory("/"),
routes: [
{
......
}
]
})
and fix it
Related
Here you can see the server.js file configuration. Apparently all is working fine but if I put in the browser the url of the admin panel: http://localhost:1337/aplicaciones/strapi_accuee/admin it doesn't work. This is the image of the error:
Can anybody help me to configure properly this url prefix (/aplicaciones/strapi_accuee) in strapi?
config/server.js url is a baseUrl of your strapi project.
config/admin.js url is one that is appended to baseUrl to access admin panel.
so to setup it up properly, i would recomend adding .env file to the root of your project and set it up as so:
URL=http://localhost:1337
PUBLIC_ADMIN_URL=/myCustomAdminRoute
in config/server.js
module.exports = ({env}) => {
...
url: env("URL", "http://localhost:1337"),
...
in config/admin.js
module.exports = ({env}) => {
...
url: env("PUBLIC_ADMIN_URL", "/admin"),
...
yarn build
yarn develop
this would give you admin panel at:
http://localhost:1337/myCustomAdminRoute/
Api route:
http://localhost:1337/api/
For http://localhost:1337/aplicaciones/strapi_accuee
i suspect you want to move api under /aplicaciones/strapi_accuee/api and uploads under aplicaciones/strapi_accuee/uploads
in .env specify following:
URL=http://localhost:1337/aplicaciones/strapi_accuee
PUBLIC_ADMIN_URL=/admin
and do:
yarn build
yarn develop
I am using Laravel Forge with AWS EC2 Instance to build a CI/CD Pipeline for a SAAS Laravel project.
Error Attachment: https://i.stack.imgur.com/hsMdK.png
The configurations are fine but when it comes to a tenancy-based project I get this error.
(Stancl\Tenancy\Exceptions\NotASubdomainException
Hostname domain.com does not include a subdomain)
Note: I am using TenancyForLaravel package
I got it fixed in 2 steps.
It wasn't a server-side issue.
1st Step
The TenancyForLaravel package was making an impact, I need to add initializing code for sub-domains in my laravel project.
app/Providers/TenancyServiceProvider.php
public function boot() {
\Stancl\Tenancy\Middleware\InitializeTenancyBySubdomain::$onFail =
function () {
return redirect(env('CENTRAL_DOMAIN'));
};
}
2nd Step
In your laravel root folder
/config/tenancy.php
add your domain name in central_domain
'central_domains' => [
'127.0.0.1',
'localhost',
'domain.com',
],
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
I'm actually running a Laravel website in which I would like to run a Vuepress documentation section.
Installing Vuepress is quite straightforward thanks to the instructions and so is the development server.
However, when it comes to integrating it as a static site, I'm kind of lost with the interactions with the Laravel.
All my documentation is located in a docs folder located on the root of the my Laravel App.
I managed to set up Vuepress' config.js to build the static site into another folder.
base: '/docs/',
dest:'./public/docs',
Doing the above, exposes the documentation is entirely exposed to the web (in the public folder).
However, what I'm looking for is to integrate it more precisely in Laravel (with the middleware and routes I created).
Method 1
1. Install vuepress in /docs in your laravel directory
2. Configure vuepress with the correct base and dest
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: 'docs/',
};
3. Enable laravel views to include files from the /public directory
/app/config/view.php
...
'paths' => [
resource_path('views'),
base_path('public'), // now blade's #include will also look in /public
],
...
4. Create a laravel route for vuepress that allows .html extension
/routes/web.php
use View;
Route::get('/docs', function() {
View::addExtension('html', 'php'); // allows .html
return view('docs.index'); // loads /public/docs/index.html
});
Method 2
Or for more control for assets through Laravel, you can try this tutorial here: https://serversideup.net/vuepress-within-a-laravel-application/
# install as a local dependency
yarn add -D vuepress # OR npm install -D vuepress
# create a docs directory
mkdir docs
# create a markdown file
echo '# Hello VuePress' > docs/README.md
package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
/docs/.vuepress/config.js
module.exports = {
dest: 'public/docs',
base: '/docs/',
};
npm run docs:build
/routes/web.php
Route::get('/docs', function() {
return File::get(public_path() . '/docs/index.html');
});
I have laravel 5.5 project uploaded to live hosting on /public_html/commerce.
When I go to domain.com/commerce/public then everything looks working perfectly.
But when I point the domain directly to commerce/public, so; when I visit domain.com then all links got broken like this:
domain.com/product/domain.comget-item-sizes-detail
Route for above link:
Route::post('/get-item-sizes-detail', 'ProductController#getItemSizesDetail');
Ajax request:
url:'get-item-sizes-detail',
type:"POST",
dataType:"JSON"
Any suggestions?
Here's a quick fix:
Create a folder in your public_html directory
I will call it webroot you can call it anything you want.
Put all the content of your Laravel public folder inside public_html directory
Put all other remaining files and folder of your Laravel project inside webroot
Edit public_html/index.php, change line 22 require __DIR__.'/../bootstrap/autoload.php'; to require __DIR__.'/webroot/bootstrap/autoload.php'; and change line 36 $app = require_once __DIR__.'/../bootstrap/app.php'; to $app = require_once __DIR__.'/webroot/bootstrap/app.php';
So you don't have to point your main domain to public_html/public again.
Just accessing the maindomain.com should have your project running just like using PHP artisan serve. But still using a service like Forge or Fortrabbit is the best way to host your Laravel app.
Good luck