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.
Related
Hey guys am new to laravel and when i create route veiw to .blade.php page it's doesn't work with apache2 localhost even with virtual host but if i run php artisan server it works fine.
Here's My code :
In web.php file in routes directory:
Route::get('users', function(){
return view('users');});
In resources/view i have users.blade.php it contain:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Users</title>
</head>
<body>
<h1>Welcome From Users View</h1>
</body>
</html>
Now if I open localhost/project/public it will work and show me laravel default page.
But if I run localhost/project/public/users it won't work. But When i type in terminal php artisan ser and go to 127.0.0.1:8080 'as he told me then' /users it will work just fine and show me the content of users.blade.php
Some info about the enviroment :
Linux Mint 21 Cinnamon 5.4.12
and Apache2 local server without xampp or lampp
All the extentions are installed
Your localhost server is entirely different from that provided by php artisan serve
If you are using xampp/wamp or any other related software, you cant access the urls that way.
Using the php artisan serve , your base url is 127.0.0.1:8000
In your web.php this code that you wrote:
Route::get('users', function(){
return view('users');});
It means that if you access the url 127.0.0.1:8080/users it will display the view file called users.blade.php
Take a look at the docs
With that said. You should not access it via the localhost url.
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>
I am developing a small web app using Laravel 5.6.
I recently upgraded Laravel to 5.6 and therefore also updated PHP to version 7.2.3 as php7.1 is a requirement for Laravel.
I am developing on a Windows 10 machine.
For testing I am using the php built-in webserver.
I either use the Laravel shortcut to start the server php artisan serve or I call directly the php -S localhost:8000 -t public command, the result is the same.
Since I updated php, I am not able to access any asset (css, js) through the browser.
blade file:
<head>
<meta charset="UTF-8">
<title>My Site</title>
<link href="{{ asset('css/search.css') }}" rel='stylesheet'>
</head>
Output in Chrome:
<head>
<meta charset="UTF-8">
<title>My Site</title>
<link href="http://localhost:8000/css/search.css" rel='stylesheet'>
</head>
Folder structure of the laravel project is:
- Root of Laravel Project
- public
- css
- search.css
I can't access the search.css file by entering http://localhost:8000/css/search.css, the server logs 127.0.0.1:52980 [404]: /css/search.css - No such file or directory
The file is in the right place, and the generated urls are also correct. In fact I didn't change anything and with older php version it worked. But of coursed I double checked a dozent times.
Validating the path in my controller.php with a few lines of code:
public function index(Request $request)
{
$t3 = public_path("css\\search.css");
var_dump($t3);
var_dump(file_exists($t3));
}
And the result was:
string(91) "C:\Users\me\Documents\LaravelProject\public\css\search.css" bool(true)
Deploying the application to a AWS EB environment will work.
So my guess, that there is a problem with the built-in webserver.
Can anybody imagine, what is wrong?
The small webserver is of course very handy during development.
I have a simple site where users can write messages & it saves them to the server, or they can read any other message people have wrote on the server too. I wrote the server side in PHP and everything works great on my localhost. I only have 2 PHP files and they get called either on a form submit or via an ajax request. I deployed my site to Heroku, but the only thing that works/displays right now is my index.html. Inside index.html I do not even deal with Javascript or the PHP files, it's simply that the CSS isn't showing. I have Procfile and composer.json at the root of the project, and everything else in /website/.
My composer.json is empty(it's just { } )
My Procfile is
web: vendor/bin/heroku-php-apache2 /website
And my index.html head css reference looks like this:
<link rel="stylesheet" type = "text/css" href="/website/style.css">
Any ideas on how to fix this issue? Thank you!
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>