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?
Related
I use sphinx to build html documentation, and am in the middle of open-sourcing some of my company's private repos.
Internally, we serve documentation from an S3 bucket through Cloudfront so we can put access controls in front of it. But for open source, I figured publishing via Github Pages would be the path of least resistance.
However, I cannot get the service to work correctly.
Here is my repo, with my index.html in the /docs folder.
Here is the site, which is not applying any of the linked css, and with all page links broken.
I tried to isolate the issue by making a test repo with just the built documentation, and publishing from master.
As you can see, this one does not even try to serve the index.html, I just get a 404 page.
These files work both locally and when serving from AWS, so I'm a little at a loss for why Github Pages is not serving it correctly. I feel like I must be making some sort of dumb oversight. If anyone with more experience could take a look and point me toward the error of my ways I would really appreciate it. I'm a backend engineer for the most part so website logic is a little outside my normal wheelhouse. Thanks in advance!
To anyone else running into the same thing, I figured it out. Because I am pre-building the site in my CI/CD pipeline, I don't need jekyll to build the site for me, and need to add an empty config file for it.
From [here][https://www.docslikecode.com/articles/github-pages-python-sphinx/]:
Next, you set up the .nojekyll file to indicate you aren’t using
Jekyll as your static site generator in this repository.
Thank you for your help!
You need a _config.yml, and you need to enable github pages on Master for the repo (go to settings). After that, you also need a Gemfile it the following:
source 'https://rubygems.org'
gem 'github-pages'
Normally, the GitHub pages site needs to be in the root, and yours looks like it's in a /docs folder, so I'm sure you can Google how to do that. It might not be possible though with GH pages, I'm not sure.
If it must be a subfolder and not the root of the project maybe something like this would work: https://gist.github.com/cobyism/4730490
Heres whats in my _config: for barebones sites:
permalink: pretty
sass:
sass_dir: _scss
style: compressed
I'm sure you can leave sass out
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.
Apologies for somewhat of a basic question, but I haven't been able to find the technical reason anywhere I've looked.
Basically, if I do npm run build I get a static html file and a bunch of css and javascript files in the build folder. I would think that I should then be able to open up that index.html file in the browser and have it work, just as would be the case for some static HTML built without React.
So, my question is: what is it that react is relying on that requires to be served up with a static file server like serve or webpack dev server?
It uses Ajax internally. The Same Origin Policy prevents it reading file: scheme URLs in most browsers.
I am creating a jekyll blog to host on my github.io account using a theme. The problem is simple: when I run 'jekyll serve' the site generates locally as it should with no issues. However, when I push it to my_profile.github.io repository, it is breaking online.
I'm confused as to why this is happening. I found one other question here on stack: Locally building and pushing jekyll site to github pages. An answerer recommends pushing only the _site folder of jekyll that gets auto-generated. However, that didn't solve it for me.
Link to my repo if anyone wants to take a stab:
https://stackoverflow.com/questions/36377865/locally-building-and-pushing-jekyll-site-to-github-pages
Link to broken live page: https://spirited-away.github.io/
Any ideas appreciated!
Looks like you're requesting assets with http://, but serving your site on https://. Browsers don't like that. Use your browser developer tools to see the errors.
Although I can't be sure without a repo URL, you've probably got something like this set in your _config.yml:
url: http://spirited-away.github.io/
Change it to:
url: https://spirited-away.github.io/
I have a legacy site that uses shtml pages. I have a project to add dynamic functionality to this site -- an MVC app where the user uploads files and the controller generates an email.
For legacy reasons, I am not able to rewrite the site. I also do not have web admin access to the site; I can only work with files in my area. The path I have to work with is //host/foo/bar/baz.
According to this Stack Overflow question, I ought to be able to make a link in the originating static page within the directory baz as link text. I tried that, and after fixing up issues with the app's web.config file, I got a 404 error. This does make sense now that I think about it, as there is no directory in baz called Controller -- only bin, Views, and the like. The physical path not found is foo/bar/baz/Controller/Action.
There are plenty of articles and Stack Overflow questions about adding a static page to an MVC app, but I have found nothing discussing the other direction.
How do I link from the static HTML page to the MVC action?
(I may have follow-on questions as I try to get the app to run.)
Edited to add:
I tried moving the MVC app code to the top level of the web site (in my development environment). When I used the link this time, I encountered a configuration error in my IoC file, with mismatched versions of Entity Framework. This approach might be promising, and it also might encounter permissions issues in the operational environment.
Also, I do not have write permissions to the root level of the web server's documents area, only my subdirectory area.
link text
Try with "/" before controller