How can I run a React app using Largon development environment - php

I have a php based backend and a React based front end.
I am following this tutorial https://whilenext.com/javascript/handling-react-routes-with-apache-and-expressjs, but I cannot see the urls changing properly:
on every click on link to a different "page" in this SPA is set on the localhost domain: for instance: "localhost\login" but it should be "localhost\mysite\login".
Also, the http requests to the backend php code are not seem to be executed. The point where I got stuck is with runing the
"a2enmod rewrite" comand on the apache server- as in the tutorial. I can't seem to understand how Laragon controls everything.
Your explanation on how to proceed is most welcome!

Related

VueJS & PHP Api

I am 'new' to PHP so this question probably has a very obvious answer, so Ill apologize in advance.
Situation:
I am running a VueJS project, running it with npm run serve and then deploying it with npm run build to a laragon apache server with PHP 7 on it.
That all works great.
I am now moving from using our C# API which we have hosted and you hit it as a URL. To a PHP Api, this API is just set up with a straight connection to SQL using sqlsrv_connect. This is also working when I host it on apache/laragon in its own folder and hitting it on its own URL extension.
But what I was wanting to do ( and not sure if this is possible )
Is in my VueJS project put the .php files in a data folder and hit them like this fetch("src\data\GetSQLData.php?table=Clients&columns=top%2010ClientID"")
Is this possible, or should I rather have them hosted separately and use the URL method?
Buddy,
Vuejs is a front-end framework.What it means is, When you do npm run build then it will create bunch of js and html/css/image files on the server.Then you require a web server to server these files.
When you hit the url on your web-browser then all these files will download into
the web-browser and then execute over there.This is how front-end framework works in a nutshell.
PHP is a back-end scripting language.Which means it require back-end php engine to run and execute the code logic.So it has nothing to do with vuejs that is running on your web-browser.
Best possible way to connect these 2 applications is via API.You should request data from a php API which is running on back-end web server.
fetch('http://localhost/GetSQLData.php?table=Clients&columns=top%2010ClientID')

Create React App, data via AJAX, PHP page backend on XAMPP Apache

I'm trying to learn React by replicating a simple CRUD page I created earlier.
The old CRUD page was a Javascript/jQuery front-end with a form. It sent data via AJAX to a PHP backend page, and the PHP page interacted with a mySQL/mariaDB database.
Everything was locally hosted on my PC on XAMPP Apache, and everything worked fine.
I have now managed to replicate the front end using React, via Create React App and it's running on localhost:3000
I am now stuck. I don't know how to make my front-end (on localhost:3000) send data via AJAX to my back-end PHP page (on localhost:80 running on XAMPP Apache)
There are a lot of us PHP / mariaDB types out there who want to continue using that sub-stack as our back-end. The answers to this question will be enormously helpful in encouraging our crowd to try Create React App and React (I'm loving React btw!). (I was surprised that when I searched [create-react-app] [php] in StackOverflow, I got only 2 hits.)
Update: if this is off-topic for SO, then I'd appreciate suggestions on which SE I should post this on... thanks!
Answering my own question.
The basic problem is one of CORS (cross-origin resource sharing). The error one gets is (in the Chrome console):
No 'Access-Control-Allow-Origin' header is present on the requested resource.
During development only, this issue is easily resolved by adding this line of code to the top of the PHP file:
<?php
header("Access-Control-Allow-Origin: *");
This code should never be left there in production unless you're okay with anyone in the world accessing the PHP file API.
In actual production of this React app, one would expect that the JavaScript and the PHP files would share the same domain, so there won't be a CORS issue.

How do I execute an index.php page in an Azure App Service?

I've created an Azure App Service and I've set the PHP version to 5.6 (though I've experimented with different versions and it doesn't seem to matter).
I've deployed the world's simplest PHP script in index.php (via a git local repo method):
<?php
// Show all information, defaults to INFO_ALL
echo "hello";
?>
When I access the URL for my App Service, the page is blank and the view source is just the script contents. Which is to say that it's not being processed and rendered as PHP.
I know PHP is doing something. I know this because if I turn the PHP version off in the App Service settings, I get an error message "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable." when accessing the page. So it only serves .php pages when PHP is on. That's sensible, except it's not actually processing the script.
I'm sure I'm doing something obviously wrong, but I cannot figure out what it is.
You can add a index.php in the Default documents section in app Settings of your Azure Web App, to approach your requirement.

Simple way to integrate php api with angular 2 application on local machine

I am creating a small Angular 2 application with a php based REST API. The way I have been developing it so far is I created mock data in a json file and used that to create the front end. I created the php REST API using MAMP and tested it separately and it works fine. The problem I am having is I would like to test the integration of both of them but when I run the npm lite server and try to make an HTTP request to the API it doesn't work. Is there a npm server I can use instead of the lite-server that would run the php API? Or is there another solution I am completely overlooking?
I actually found one solution. So I can enable CORS on my local MAMP server by editing the Apache configuration file. In case anybody needs to do something similar here is a very short tutorial on how to do the same:
http://enable-cors.org/server_apache.html
This works great for my needs.
You can also just do it in your PHP file so you don't have to fiddle with apache:
<?php
header('Access-Control-Allow-Origin: *');
header('ContentType: application/json');
echo json_encode('whatever');
exit;
?>

Google App Engine PHP SDK returning error on helloworld script

I am currently trying out the Google App Engine for PHP on my local development environment. So far, I have been following the instructions at https://developers.google.com/appengine/docs/php/gettingstarted/helloworld in order to just test out a small app to get used to how the SDK works. However, when I get to the point of loading the test web server using the SDK, I get an error trying to load the very basic helloworld.php example. The command I currently run is:
../GoogleAppEngineSDK/google_appengine/dev_appserver.py --php_executable_path=/usr/bin/php --port=9999 helloworld/
As you can see I use a custom port to avoid conflict with another application that runs on the default 8080. The SDK engine loads fine, but as soon as I try to access my application under localhost:9999 I get the error:
AssertionError("invalid CGI response: ''",)
and the web page itself throws a 500 error.
So far my attempts to correct the problem have yielded nothing and was wondering if there may be something I am missing.
You should make sure you're pointing to the php-cgi executable not php. Not every OS comes with this so you may need to install it. The getting started guide has more detailed instructions.
Just had this issue. Changing my php_executable_path to /opt/local/bin/php-cgi54 did the trick.

Categories