I just finished my app in my development laptop, and now I am trying to deploy to an ubuntu server. I installed everything and ran rails s to try the development environment there. It works, but it never loads the css or js, I precompiled them and double checked that they are in the public assets folder.
The problem is that it never asks for them. For example, my application layout view it like the usual (just as an idea, not the actual code, but it is not needed to explain):
<html>
<head>
----rails calls to application.js and css
</head>
<body>
<%= yield %>
</body>
</html>
But when I load the login page, there is no css. I check the page source, and it only shows the <%= yield %> part, no html, body, or head tags, and of course no references to css or js. I login, and navigate the app correctly, but never is there any css or js files used.
Why is this happening? Nothing changed in the code, just a different machine. I've tried it in different machines, just copying the folder with all my code, and running bundle install then rails s, and it works great, in 3 different machines. Why doesn't it work on the ubuntu server?
I finally got it working.
For whatever reason, rails lost the default value of what view to render in the application controller.
I added the following line to the application controller and it worked:
layout "application.html.erb"
No idea why this is needed, since it is the default.
Related
I'm developing a Wordpress "widget" that is going to be a little react app. I've chosen create-react-app for this purpose.
Now I can see how to run the development server standalone easily enough, but I'd like to develop it while it sits inside the Wordpress website. I've created a trivial "Custom HTML" widget:
<div id="root"></div>
<script type="text/javascript" src="http://localhost:8080/static/js/bundle.js"></script>
This does not seem to work however...
Note I came up with /static/js/bundle.js by looking at the requests in the network tab when loading http://localhost:8080 directly, which is the prescribed way to access the dev version of the app.
So how do I access the development version of the app (with all the live reloading goodness) while embedded on my local version of the Wordpress site?
I had this same problem today in a PHP app I am developing. It is very frustrating to embed a create-react-app in development mode, and I had to consult a lot of different resources to learn how to do so. Here is a summary of my findings.
Using an iframe
Using an iframe to embed the create-react-app, as #quickshiftin suggests, is not a bad idea, but if you wish to pass configuration to the embedded SPA by calling methods or setting global variables in Javascript, it will not work* -- as the MDN documentation says (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scripting), iframes are subject to the same-origin policy.
* (Note: I found out after writing most of this answer that there is indeed a way to bypass the same-origin policy. It's called Window.postMessage(), and it's also mentioned in the section of the MDN documentation that I linked above. You may want to consider using that. But if you would like to avoid using an iframe for whatever reason, read on :)
Create-React-App file structure; embedding in production mode
The first thing you must know is that embedding bundle.js is not enough -- create-react-app builds multiple JS files that need to be embedded using <script> tags in the correct order. This blog post by Jeremiah Tabb describes the file structure of the bundled code and suggests a way to embed the create-react-app in production: https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f
The filenames of the bundled code contain hashes which change at every build. The hashing can't be disabled, it's a WONTFIX in create-react-app (https://github.com/facebook/create-react-app/issues/821). So, to get the bundled js filenames for a production build, in PHP, you can just traverse the build/static/js directory and output one <script> tag per .js file you find. (It may be wasteful to always request all chunks, but I haven't yet taken the time to look into the right way to do it.)
Development mode looks for chunks under the wrong path
But in development mode, which is your actual question, it is handled a bit differently. The index.html served by the dev server only loads three scripts initially: bundle.js, vendors~main.chunk.js and main.chunk.js. The other chunks are loaded dynamically. You can try embedding those three scripts on your Wordpress page, but you will find that at runtime, the 'bootstrap' code generated by Webpack looks for the chunks at the wrong URL, using e.g. localhost instead of localhost:3000, resulting in a chunk loading error.
PUBLIC_URL and "homepage" don't work in development mode
According to the Create-React-App documentation and various other answers on this site, you're supposed to be able to use the environment variable PUBLIC_URL or the key "homepage" in package.json to override the hostname and port where the JS code is served so that the chunks will load, but these settings don't do anything in development mode. This is an open issue in create-react-app: https://github.com/facebook/create-react-app/issues/9001
Workaround using npx patch-package
You might think you are in trouble and will have to eject your project and modify the webpack configuration yourself to get this working. But fortunately, there is a workaround described here in a comment by SergeyVolynkin which solves the problem without ejecting, using npx patch-package to patch react-dev-utils:
https://github.com/facebook/create-react-app/issues/9001#issuecomment-838370686
What SergeyVolynkin does not mention is that, after creating the patch and checking it into VCS, you should set up patch-package in your package.json so that the patches will be applied by npm / yarn when you run yarn / npm install. See the documentation for patch-package here: https://github.com/ds300/patch-package#set-up
Summary
After applying SergeyVolynkin's patch, I was able to get the development build embedded in my PHP app. I used the following scripts in my package.json:
"scripts": {
"start": "PORT=1234 PUBLIC_URL=http://localhost:1234 WDS_SOCKET_PORT=1234 react-scripts start",
"postinstall": "patch-package"
}
And I used the following lines in the HTML served by my PHP app:
<script src="http://localhost:1234/static/js/bundle.js"></script>
<script src="http://localhost:1234/static/js/vendors~main.chunk.js"></script>
<script src="http://localhost:1234/static/js/main.chunk.js"></script>
By doing this, I could embed an app created using create-react-app in dev mode in my PHP app.
I have a simple html file that consists of a gifv video which does not play on Google Chrome while if I enter the code at w3schools, it renders properly which makes me confused.
I have checked the other previous solutions to fix the gifv problem but it is still not rendering on my html file.
HTML script
<blockquote class="imgur-embed-pub" lang="en" data-id="91S22q6" data-context="false"><a href="//imgur.com/91S22q6">
View post on imgur.com</a>
</blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>
I had the same problem as you- gifvs will not load locally when using imgur's embed code. After a lot of head scratching I figured out that if you load your html file over a python server, the gifs will render. It's really easy to do, it's just a one line command. Here's an article explaining how to do it:
http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/
here's the basic summary:
"An advantage with the built-in HTTP server is that you don't have to install
and configure anything. The only thing that you need, is to have Python installed.
That makes it perfect to use when you need a quick web server running and you
don't want to mess with setting up apache.
You can use this to turn any directory in your system into your web server
directory.
To start a HTTP server on port 8000 (which is the default port), simple type:
python -m SimpleHTTPServer [port]"
http://s.imgur.com/min/embed-controller.js refers to window.location.protocol. If you are browsing a resource served from file://, this is going to break the expectations of that script.
That means you need to serve this via http:// or https:// to work.
I made a web application recently and wanted to upload it to Heroku. I use solely Javascript, CSS, and HTML. I loaded it on Heroku.
Whenever I click the links it takes me nowhere.
In my tests (using the git folder) I tried two of the methods listed here. I've done the index.php method and the config.ru method.
Nothing seems to work. How can I fix this?
I feel like a baby for having to do this but bear with me. I'm trying to set up webpage structures on my desktop in a folder. It's got an index.html and a couple folders of its own. One folder, "research", has its own index.html. I'm trying to link to this page from the higher index.html with but instead of taking me to research/index.html it takes me to a 'file-directory view' (for lack of knowing what to call it) of the directory research/
Clearly I could fix this by doing but that's annoying. Thoughts?
if you want to browse locally, you will have to include the file name. in other words:
<a href='research/index.html'>research</a>
The reason it works on remote servers is because replacement is done by the web server so if you want research/ to work then you will need a local web server such as wamp on windows or mamp on mac.
I am working on a maven project with spring boot and angularjs.
Today I changed some simple html tags and noticed it wont change when testing in localhost.(odd because on Friday it did)
How i route my HTML with angular:
app.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when("/", {
templateUrl : "./html/homePage.html",
controller : "some-controller"
})
So when changing something in on of my pages it wont change in localhost.(Not hidden or something.Its just my structure from Friday)
I tested and changed homePage.html in homePage1.html. Started again and ofc it wont render anything because the file doesnt exists.
When I moved the somePage.html from my HTML folder and started the project again it rendered the page(but again the page from Friday). Again its rendered a File which isn't even in the folder.
When calling the page static via localhost/html/somePage.html it always shows the old page from last week. (with and without the edited file in path)
What I tried:
Restart Eclipse
restart whole pc
cleaned proejct(via eclipse)
cleaned and reinstalled with maven
updated project via maven
Does someone have a solution? (before i become insane)
I think the problem comes from the cache. Free the cache of the browser and test it again.
Ok Got it.
The error was a mix of eclipse cache and a Plugin.
Noticed that Egit, which wont worked with Spring Boot Suite, magically fixed itself and activated itself.
After resetting the Head of Git and deleting the cache in eclipse the changes are rendered again.