Laravel vue js deploy application on live - php

I have created a project on laravel using vue js. Where my frontend is totally based on vue js and i am using laravel apis for backend. My project structure is like :
--app
--bootstrap
--config
--database
--fontend //This is my vue js code
-- assets
-- layout
-- mode_modules
-- pages
-- public
-- resources
... and so on.
I have run this command on my frontend folder
npm run build
It created a folder dist in frontend, now what will be the next step ?
My Server Information Ubuntu (Apache)

You should just copy contents of dist folder on your server main folder, or of you have folder structure with folders like public/www/web, then there.
If you want to run "live" on wamp or xamp then copy to folder www.
Of course if you already have working backend

You just copy contents inside the dist folder from your xampp/wampp folder.
and on Ubuntu server place inside directory /var/www/html folder.
or if you want to place inside any folder on the server like /var/www/html/front
then on front folder place contents inside front folder then point domain to that front fodler.

Related

Laragon - How do I serve a website on startup?

Right now I have to open laragon start all > go into commands > and write php artisan serve, only then can I access the local website.
My question is how can I start all and serve the website on start of the program.
Thank you in advance!
you have to put your project folder into C:\laragon\www\
when start the laragon service it's gonna search in that folder and use the name of the folder project to create a custom url, for example
if you put your project folder named newproject into the C:\laragon\www folder, when you start the service, laragon it's gonna make an url with the name of that folder newproject.test
C:\laragon\www\newproject-> newproject.test
C:\laragon\www\blog-> blog.test

PHP backend inside vuejs project folder

I created a vue/cli 3 project and its in my documents/project folder. Im running it on port 3000 with "npm run serve" command. Now, i want to have a backend folder somewhere to serve PHP files. But i want both the frontend and backend to be in the same folder structure.
Currently, my vue is in my documents folder and my php is in my xampp folder. The problem im having with this is managing 2 folders and git for the same application. Also, this causes my ajax calls from my vue projet to use a silly url such a "http://localhost:80/project/file.php". Id like to use relative paths like "backend/clients/getClient.php" that would be somewhere within my vue project.
This is what i would like:
myProject
frontend
my vue stuff like public and src folders
backend
my php files
It doesnt have to be exactly that way but the point is that now i have a single folder and git for a single project.
thank you.
The way I do this is as follows:
1)
I put the php files in a subfolder the public/ folder in the vue/cli project structure.
That way, these files will get copied to the dist folder on building the project.
For example: I have the file /public/api/endpoint.php, this will end up in dist/api/endpoint.php.
For testing locally I now copy the php files to the xampp/htdocs dir whenever I change them. But I guess you could skip this step by setting up a xampp alias directory. (But I haven't tried this myself yet)
2)
The ajax urls still differ between local development mode and production. To solve this I define a webpack plugin in my vue.config.js:
const webpack = require('webpack')
const API_URL = {
production: JSON.stringify('https://www.project.com/api/endpoint.php'),
development: JSON.stringify('http://localhost/project/api/endpoint.php')
}
// check environment mode
const environment =
process.env.NODE_ENV === 'production' ? 'production' : 'development'
module.exports = {
...
configureWebpack: {
plugins: [
new webpack.DefinePlugin({
API_URL: API_URL[environment]
})
]
},
...
}
Then use this in a vue/js file like:
const apiUrl = API_URL // eslint-disable-line
(the eslint directive is only needed If you have linting turned on with eslint, it will throw an error that API_URL is not defined.)

Is there a way to create an Eclipse project excluding the project name in the path?

Not sure how I can explain this better as I am a beginner to Eclipse application.
I have my web directory set up for php pages. For example, /home/www/phpsite. All the source files exist here.
However, whenever I create a project (say 'myProject') and test any files from the existing path, it includes the project folder in the path name:
/home/www/phpsite/myProject/index.php
and this results 'Not Found' error.
How can I run my php pages in /home/www/phpsite/index.php? The project folder name is always included in testing web pages.
I am not trying to use the workspace directory created by Eclipse. I'd like to code and modify pages directly from Eclipse to my web directory.
Thanks
Follow these steps:
Setup www as your workspace
From the menu: File -> Import -> General -> Existing Folder.....
Promote to project:
Choose project type: PHP
Browse for "phpsite" and finish.

Where I have to deploy my app files after logging in to openshift using filezilla

I logged into openshift application using filezilla.
Earlier for normal website i just drag and drop files at www directory its works pretty fine but in at this case i found some other folders and i am unable to get an idea where should i drop my php app in at this particular machine. I am unable to locate where the index file is located also. if I am using git for the deployment of application it works pretty fine.
Openshift makes it easy to upload program changes by checking out the container. Adding the code and the pushing it.
see How to git-checkout first application created on OpenShift? on how to do that.
I'm not sure about the structure when you use filezilla to connect to the Openshift container, but it should be similar to the checked out structure
index.php Template PHP index page
.openshift/ Location for OpenShift specific files
action_hooks/ See the Action Hooks documentation
markers/ See the Markers section below
pear.txt List of pears to install
Depending on what cartridge you are using:
php/ # for backward compatibility with OpenShift Origin v1/v2
public/ # Zend Framework v1/v2, Laravel, FuelPHP, Surebert etc.
public_html/ # Apache per-user web directories, Slim Framework etc.
web/ # Symfony etc.
www/ # Nette etc.
./ # Drupal, Wordpress, CakePHP, CodeIgniter, Joomla, Kohana, PIP etc.
See https://developers.openshift.com/en/php-repository-layout.html for more details.
try this:
goto app-root > repo
put your files in this folder. if you put a index.php, it will be accessible through the web.
but there's a more convenient method.
create a folder name php inside the repo folder and openshift will use it as a document root. which means all other files will be unaccessible from the public.
conclusion
put all other files in app-root>repo. put the index.php in the php folder and link other files accordingly.
optional:
use GIT. its easy and way more convenient than sftp. you need to learn only 4 commands.
git add
git commit
git push
git clone
that's it!
edit1
IF php/ dir exists THEN DocumentRoot=php/
ELSE IF public/ dir exists THEN DocumentRoot=public/
ELSE IF public_html/ dir exists THEN DocumentRoot=public_html/
ELSE IF web/ dir exists THEN DocumentRoot=web/
ELSE IF www/ dir exists THEN DocumentRoot=www/
ELSE DocumentRoot=/
above is the priority of document roots in openshift. use whatever you like.
Had the same problem. You need to turn off APC cache. This can be done via an .htaccess file:
php_flag apc.cache_by_default Off

Copying Assets to Web root folder instead of Web/Bundles

I have Symfony project in which i want to copy images to web folder. So I used bellow command.
php app/console assets:install web
It copy all images to Web/bundles/framework. I want all images in Web root folder.
Please suggest me how can i change the path to store all images or assets to root folder of web instead of storing in bundles.
You cannot do that, because the default bundles/ directory is hardcoded in the source code:
Symfony\Bundle\FrameworkBundle\Command\AssetsInstallCommand - Line 83
$bundlesDir = $targetArg.'/bundles/';
So I suggest either sticking to that convention or submitting a PR to the Symfony core repository to parametrize this directory.

Categories