So, I am trying to build an platform that uses Symfony 4 as a backend service (only JSON api calls) and React as the frontend.
I am using cPanel and after building my React app in production mode I copy it in the public_html folder.
At the same time I create a folder called 'api' and throw Symfony backend code there. I've installed symfony/apache-pack and I can access my Symfony API at the following URL: 'mydomain.com/api/public/api/users' since the htaccess file that apache-pack created is located in the public folder.
However this is not what I want, I'd like to be able to access my API as 'mydomain.com/api/users' and also be able to reach React app by 'mydomain.com/login' (or any other route I create).
Is there any config I can do to make this work?
Should I simply switch my Symfony app to a subdomain like 'api.domain.com' and use that?
You'd be surprised this is very simple, and applies not just to react but any other JavaScript framework that you want to combine with Symfony.
Just add the react index.html to becomes symfony's base.html.
In other words let Symfony Render the index.html where you reference React Scripts
../base.html.twig
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My React App</title>
</head>
<body>
<!-- ... other HTML ... -->
<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
<!-- Load our React component. -->
<script src="app.js"></script>
</body>
</html>
Related
I decided to try the bootstrap and it's been pain for me, it's not working.
what I did:
laravel new project
cd project
composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev
Then in the welcome.blade.php I change the code to this snippet so I can test bootstrap:
<!doctype html>
<html>
<head>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-light bg-light">
<span class="navbar-brand mb-0 h1">Navbar</span>
</nav>
</body>
</html>
Things I made sure they're correct:
The /resources/sass/app.scss has import
'~bootstrap/scss/bootstrap';.
The includes in the HTML page
Screenshot of the files structure & configs might help:
Notes:
I am using Laravel 8.
Would appreciate any helps.
You need to create two folders named css and js inside of the public folder.
click here for screenshot
Then, download compiled bootstrap from https://getbootstrap.com/docs/5.1/getting-started/download/ and extract the downloaded file.
Then, browse the css folder which is inside the bootstrap and find the bootstrap.min.css file and find the bootstrap.min.js file from the js folder.
Then, copy those files(bootstrap.min.css, bootstrap.min.js) into the relevant css and js folders respectively under the public folder.
Then, rename the bootstrap.min.css file as app.css and rename bootstrap.min.js as app.js.click here for screenshot
Then, bootstrap is successfully working in your laravel app.
Best regards,
How do I put my Unity game built in WebGL into Laravel?
FYI, Unity WebGL, when built gives me these files:
- Build (folder)
- TemplateData (folder)
- index.html
Let me tell what I have done:
[ How I test if the game works in WebGL using XAMPP ]
I built a Unity game in WebGL
I put the built folder in xampp/htdocs directory
I run xampp, then turn on apache server
I open my browser and went to localhost/mygamefolder
It works fine, but this is using xampp
Now what I want is, how to test if the game works using server hosted using Laravel framework...
[ What I did ]
I put the built folder into mylaravelproject/public directory
I copied the content of index.html file from the Unity built project and paste it in one of my views file (.blade.php).
I changed the stylesheet and references at the tag according to the path where I put the built folder is.
I open the terminal and run 'php artisan serve'
I open browser and go to the IP address as shown in the terminal
I went to the page where I put the game, but the game does not load. (Game only, other thing like navbar and button I put etc works fine)
I open console, it said:
"Uncaught ReferenceError: UnityLoader is not defined
"Failed to load resource: the server responded with a status of 404 (Not Found)" at demo:15"
Any ideas? Or if you can direct me to tutorial on how to put your Unity WebGL game into Laravel that would be good. Since I tried to search for it and so far I found nobody is putting Unity in their Laravel website.
--- Edit: Here is the index.html file as produced by Unity WebGL ---
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Projectile</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/OrangeCodeGame.json", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
<div class="title">Projectile</div>
</div>
</div>
</body>
</html>
Figured it out:
When you build Unity game with WebGL, Unity will provide this files:
index.html
Build (folder)
TemplateData (folder)
Copy the index.html into the resources/views folder and change the extension of "index.html" into "index.blade.php"
Open public folder in the Laravel project, copy and paste the Build and TemplateData folder.
Go to routes/web.php, add the controller that will route to the index.blade.php.
4. You can test it with button or anything you like.
Done, now it will works fine. You can even put Laravel content inside the index.blade.php of unity with your navbar or anything you like.
Plus, the authentication session can also be passed normally.
I've downloaded bootstrapp with composer
composer.json
{
"name": "afern/seocom_login",
"require": {
"twbs/bootstrap": "3.3.7"
}
}
and I've included the autoload file on index.php
<?php
include "./vendor/autoload.php";
?>
<html>
<head>
</head>
<body>
<h2>Hello</h2>
</body>
</html>
Bootstrap its downloaded on vendor folder but it's not working I guess I also have to add this line to the html code
<link rel="stylesheet" href=".vendor\twbs\bootstrap\bootstrap.min.css">
Am I right? or there is any way to work bootstrap only with
include "./vendor/autoload.php"
Composer is for managing your PHP dependencies, which appears to be your backend technology of choice. However, a UI framework, such as Bootstrap, is a frontend dependency (CSS and JS).
Your proposed way of referencing the CSS in your HTML is the way to go:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
Same for jQuery and the Bootstrap JS:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
It's probably easiest for you if you embed it from a CDN as in my examples. If you want to serve the files yourself you could use bower to manage your frontend dependencies (although I think that is discontinued).
Your composer auto load script, however, is not what you need for this.
I am developing a simple web app with Slim framework. I got stuck with a probably simple problem. I want to include static files (CSS and Javascript) into my template.
My project folder structure is as follows:
index.php //<=== where all the routing happens.
/flot
layout.css
jquery.js
....
/templates
first_template.php
My header of first_template.php contains:
<link href="../flot/layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="../flot/jquery.js"></script>
When I call the projects root url
http://localhost/xampp/ProjectX/
(I'm using XAMPP) the template shows up, but the css and javascript stuff is not working. The Google Chrome console shows:
GET http://localhost/xampp/ProjectX/flot/layout.css 404 (Not Found)
GET http://localhost/xampp/ProjectX/flot/jquery.js 404 (Not Found)
Any suggestions? I spent almonst one hour in googling, but the overall documentation of the Slim framework is still literally slim :)
I assume you are displaying your Template on the Project root (index.php), so you should remove the ../ from your Stylesheet and JS relative Paths:
<link href="flot/layout.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript" src="flot/jquery.js"></script>
I have a strange problem with Yii & Jquery:
When I open a page which uses ajax/jquery on localhost Yii does automatically add asset include calls to the of the page:
<link rel="stylesheet" type="text/css" href="/PATH/assets/f72b359d/style.css" />
<script type="text/javascript" src="/PATH/assets/2e442e1a/jquery.js"></script>
<script type="text/javascript" src="/PATH/assets/2e442e1a/jquery.cookie.js"></script>
However when I run same code on the server Yii does not do it hense no Jquery available.
I'd appreciate if someone could direct to a way to solve it.
It seems like you're not registering jQuery in the correct way. You must add the following line in /protected/views/layout/main.php before </head> tag:
<?php Yii::app()->clientScript->registerCoreScript('jquery'); ?>
It will load jQuery automatically. Remember, if the YII_DEBUG flag is on it will load non-minified version, when deactivated (on production) it will load minified version. Hope this will fix your problem.
If all is working on your local machine it might be a permission problems
Have you checked that /assets is writable on your server ?
Yii publishes the assets it needs at runtime in this directory