I am not able to render the Angular on my webpage correctly when using Github Pages.
Problem page: http://weblue.github.io/
I thought this original to be a conflict with Jeckyll, so I changed the symbols for parsing to {( )} to avoid a conflict.
The page still only displays {(variable)}
You will notice that you links to the .js files are linked to ../TierlistTemplate/js/.. but in reality they are in /js/.. so you will have to fix that.
Related
I'm at a beggining of my programmer journey, this is my firt post, probably not last.
So here is problem. I build portfolio project in React, using create-react-app. It was not necessary technology but I wanted to practice, by moving simple site to React. I used routes for multipage (there is only 2 pages). I used custom domain, because this will be site for my mother hairdresser salon, and Netlify free hosting. Here is link:
https://bozena.net.pl/
I struggle with redirection for gallery (galeria).
https://bozena.net.pl/pages/Gallery
If I go directly there or refresh, its not working. I used API for pictures, if thats matter. I found out I need to use _redirects file in build folder, but I cant figure out exact syntax for this (I checked Netlify documentation about _redirects). For now my _redirects file looks like this:
/ https://bozena.net.pl/#price-div
/ https://bozena.net.pl/#contact
/(whats here?) https://bozena.net.pl/Gallery
I tried different paths for this gallery, like /pages/Gallery (here is jsx file for gallery) but I didnt find anything working. price div and contact are divs on main page,and this directions will get me to main page. Anyone help me get this gallery link working?
Here is code for whole page:
https://github.com/kadynski/Hairdresser-app
code
bold
italic
quote
Draft saved
I'm at a beggining of my programmer journey, this is my firt post, probably not last.
So here is problem. I build portfolio project in React, using create-react-app. It was not necessary technology but I wanted to practice, by moving simple site to React. I used routes for multipage (there is only 2 pages). I used custom domain, because this will be site for my mother hairdresser salon, and Netlify free hosting. Here is link:
https://bozena.net.pl/
I struggle with redirection for gallery (galeria).
https://bozena.net.pl/pages/Gallery
If I go directly there or refresh, its not working. I used API for pictures, if thats matter. I found out I need to use _redirects file in build folder, but I cant figure out exact syntax for this (I checked Netlify documentation about _redirects). For now my _redirects file looks like this:
/ https://bozena.net.pl/#price-div
/ https://bozena.net.pl/#contact
/(whats here?) https://bozena.net.pl/Gallery
I tried different paths for this gallery, like /pages/Gallery (here is jsx file for gallery) but I didnt find anything working. price div and contact are divs on main page,and this directions will get me to main page. Anyone help me get this gallery link working?
Here is code for whole page:
https://github.com/kadynski/Hairdresser-app
Try this
add a file in your project public folder name it as _redirects
and then paste this code and save (and deploy) /* /index.html 200
Source: https://answers.netlify.com/t/netlify-page-not-found-when-sharing-react-router-dom-based-links/11744/2
Hi so I'm working on a bootstrap CSS header project and I happen to have this issue on getting a link on Bootstrap header that I'm working. I used React router on this one.
If using this code snippet
<ReactBootStrap.Nav.Link> <Link to="/StoreInfo"> Store Info </Link> </ReactBootStrap.Nav.Link> I was able to access the router link that I made but then when I inspect it on chrome I'm getting this error in DOMnesting regarding a link cannot appear as a descendant of a link now i fix that by removing the link and putting it inside the bootstrap link instead as show in this code snippet <ReactBootStrap.Nav.Link to="/StoreInfo"> Store Info </ReactBootStrap.Nav.Link> but then the problem now is the link no longer working. Can anyone help me to fix this? I will appreciate it a lot and Stay Safe everyone!
It seems for the ReactBootStrap.Nav.Link-component you should use href="/StoreInfo" and not to="/StoreInfo"
See the documentation here: https://react-bootstrap.github.io/components/navs/
I have a reactJS SSR app deployed into server, I am trying to use one of the page /listpage as a widget into some other website
The list page is appearing nicely in other website however some of the click actions were not working, when I debugged it I found that the issue was with serving reactjs static js chunk files which were created by react run build. The issue was with relative path /static/js/xxxx
to fix this issue, one solution is to have a full path reference, to enable that I added homepage:"" in package.json
this worked and when I checked network tab in chrome browser i could see all static js files are referred using full path.
however a strange issue occurred , the whole list widget appears and suddenly disappears , when I inspect the elements I could see nothing inside thats where all react components suppose to be rendered.
for full code of SSR project kindly refer with explanation.
however the full code is in github
while I build a page using react, I found it would be blank for few while when the build javascript is not completed loaded. I guess the build package is quite large and this makes it load quite slow. during this time the page stays in blank,
how to solve or avoid this ?
:)
There are two options you could follow --> 1. Make the app isomorphic (render pure html on first page load) or 2. Display a message or loading giff in the div where you are loading your app into (it will get replaced by the app when it loads).
To complete #deowk answer you can also try to minify your JS. It depends on which build tool you use (Webpack, Grunt, Gulp, ...) but you should be able to find a module/plugin to uglify your JS.
Plunker: http://plnkr.co/edit/Sjfb3Esx1NsjwaYGLMGZ?p=preview
Accordion is in the servers tab.
The plunker actually works. My real app does not. The only thing that plunker is not really replicating is the ui-router stuff. On my actual app the accordion won't open. Other questions on SO say that ui.bootstrap is not included and that fixed their problem. I do have ui.bootstrap included though.
I've also tried copying and pasting the example from http://angular-ui.github.io/bootstrap/ that doesn't work either.
I'm at a loss for what else to look for.
More info:
I'm not getting any errors. Also other ui-bootstrap directives work just fine. I'm using tabs on this same page, and modal and dropdown work on other pages.
there is an issue with some version of angular-ui, the js assumes that one atleast one accordion is open and tries to calculate width. But bootstrap hides all accordions. So try displaying one accordion through css, i.e. set the display property of the accordion.
As per my comment:
It's my template. Somehow my template files are out of sync with the js files. In the template it is calling ng-click="toggleOpen()" which does not exist in my code. When I roll that back to ng-click="isOpen = !isOpen" everything works as expected. I need to figure out why my templates and js files are out of sync.
I installed ui-bootstrap using bower which does not include template files. I need to disable template caching during development so I can't use the tpls code. I downloaded the template directory from github and some of the templates simply do not match up with the version of code that bower downloads. I updated the template file to an older version that correctly matches the code from bower. Everything works now.