I have a website written in React.
The website itself works fine.
I also have blog which is based on Wordpress.
When I put blog contents on blog directory, React show the 404 not found page because all contents but static is managed by React.
I think if I could set one more directory called blog as static directory, I can put all Wordpress related files on the directory.
But I was struggling to do that.
Is there any options or setting files for react-scripts build?
like react-scripts build --static-directories static,blog
Could you please help me?
/index.html
/static/* < static contents
/blog/* < also static contents.
Thanks in advance.
[UPDATE] even though i put static file on static directory, I could not access it. It turned out I need to import that static file from Reactjs file...
This is something you probably want to deal with on a server level.
So if you are using express, then you can do something like:
app.use('/static', express.static('public'))
[SOLVED] Problem was 2 folds.
Server-side and client-side.
First, I edited the .htaccess file not to rewrite anything.
RewriteEngine off
Now Safari can understand "my domain/blog/" correctly.
But Chrome still treat "my domain/blog/" in ReactJS.
I don't understand why but I can see correct no-React contents only once after deleting cache. But once I open React contents, Chrome start treating "my domain/blog/" as React contents again.
Then I checked source code again and found that I used a React Router's feature called Switch. It seems Switch is doing rewriting thing in React.
So I removed the Switch tag and finally problem solved.
Related
I built a website on NextJS and deployed it on vercel. On the local environment at localhost:3000, it shows the background image but on vercel it does NOT show the background image.
Below are screenshots
On Vercel :
On Local :
I am setting the background image with the tailwindCSS where I defined the images in tailwind.config.js file and using them in different components. But that is not the issue as it is working fine in local envirenment.
I don't know what is the reason that why it is behaving differently.
Project GitHub Link : https://github.com/mohitm15/Weather-Lytics
Instead of using relative imports to the public folder within your tailwind config, you should leverage next's static file serving to load images from it.
For example, if you look in the DOM, the URL pathing generated during the build process is trying to utilize mini-css-extract-plugin to create a path, but the path is not valid:
When using static file serving, your tailwind config would change from:
'day_sun' : "url('../public/back_big.jpg')",
to:
'day_sun' : "url('/back_big.jpg')",
When compiled, the path may look incomplete, but it's actually directing that request to /public/[image].[ext]:
Working demo (the weather searching feature will not work since NEXT_PUBLIC_API_KEY_1 is undefined): https://weather-lytics-refactor.vercel.app/
Even though I load my images from static file serving, similar bug still happened to my app.
The bug is at my /public/img folder. According to the document, seem like the /img folder have similar name with some next file or folder, which can cause bug.
To fix it make sure you don't have any folder name "img" or something like that . . . (name "pic" work for me)
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
yesterday I wanted to create a landingpage for a subcategory if my website. The site it build with create react app. I created the sub-page using react router. On lokal machine everything works fine.
But after I deployed it on AWS (amplify) the included fonts in the whole app (old site and new one) are not working anymore.
I am getting the "Failed to decode downloaded font: " and "OTS parsing error: invalid version tag" errors.
I didn't changes anything in the index.scss/index.html files.
After I`m running the build command the fonts-files are in the right folder ...
This is how my index.scss looks like:
#font-face {
font-family: "SF Compact Display";
src: url("./assets/fonts/SF-Compact-Display-Regular.otf");
}
#font-face {
font-family: "SF Compact Display Semi";
src: url("./assets/fonts/SF-Compact-Display-Semibold.otf");
}
I also tried it with absolute path :
enter code here src: url("assets/fonts/SF-Compact-Display-Semibold.otf");
But it doesn't work.
I imported the index.scss into my index.tsx import './index.scss'
Both files are living in the src root.
I have read lots of other stories that are similar to my problem. But nothing works.
Does anyone have a guess why I am getting this problem? Is there maybe a redirecting issue with aws as this is the only think which I changed?
(as i said before I included the react router the fonts where working fine ). I also tried to remove the react router and get the old page with the right fonts. But now I have the same issue there.
On aws rewrites I included </^[^.]+$|\.(?!(css|gif|ico|json|jpg|js|png|txt|svg|woff|ttf|otf)$)([^.]+$)/> with /index.html and 200 Rewrite.
Im trying to fix it for hours now, but I don't have any clue what the issue could be.
I hope anyone had the same issue in the past and can help me.
Bests
Not sure if you already solved this, but here're some thoughts to help.
The Failed to decode downloaded font error is almost certainly because the app responded to the browser's request for the font with html. This would likely happen if there's a catch-all route configured for the SPA (e.g. respond with the root index page or a not-found page).
From the info you've shared, the most likely issue is that the relative path to the font files is being broken in the build process. The key insight here is that url("assets/fonts/SF-Compact-Display-Semibold.otf"); isn't actually an absolute path because it's missing the / prefix. If your build's putting the font file in /assets/fonts/SF-Compact-Display-Semibold.otf, what you want is: url("/assets/fonts/SF-Compact-Display-Semibold.otf");.
A useful way to check the directory structure produced by building is to run npm run build (see https://create-react-app.dev/docs/production-build/). This produces a production build in a directory called build. When creating an AWS Amplify project, it automatically sets up running the build process for you (see https://docs.aws.amazon.com/amplify/latest/userguide/build-settings.html). By default, for create react app apps, this means it'll do npm run build prior to deploy.
I'm really a newbie in front-end development. I'm currently involved in a project that does front-end development. I hope I can explain this clearly.
Whenever I call http://localhost:8080/test, it is loaded by page1.jsp.
Now I would like to load a TSX file instead of a JSP. I tried changing my <welcome-file> from page1.jsp to html/js/page2.tsx in web.xml but I don't know why it is not working.
What happened is that a download file window will pop up instead of loading http://localhost:8080/test.
I placed the TSX file in the html/js directory because that's where the package for Typescript and React is located. By the way, the TSX file I'm talking about is a React component that uses Typescript.
Is it possible to configure the web.xml to render the TSX file? If not, is there any other way for me to load it?
Is web.xml still important if I want to load a TSX file?
No, for several reasons:
A .jsp is a "Java server page". You are probably running an application server like Tomcat (I haven't done that in fifteen years or so, so bear with me). It is compiled into a Servlet, which then runs to produce your page as output. Your .tsx file doesn't fit in that process.
Your application server probably has a directory somewhere where you can put static files that don't need to be run on the server side; see if you have a "WebContent" directory or so. In it you can place pure HTML files, Javascript files, fixed images and so on.
But if you put your TSX file there, your browser still won't be able to use it: browsers don't understand Typescript. Typescript needs to be compiled into Javascript, and if you put the resulting .js file there, then a HTML file could use it (with a tag), and that would work.
But your file isn't only Typescript, it's a tsx -- it probably also contains JSX, which also needs to be translated to Javascript.
There are also dependencies, like React, that you'll also need to download in your HTML.
On the whole this is what a bundler like Webpack is for (if you used create-react-app, for instance, you'll get a working Webpack configuration from the start). It can create a "bundle.js" containing all the Javascript needed in one file, including all the dependencies and all your TSX code compiled to Javascript.
Place that in a WebContent or similar directory, call that from a tag in some HTML file -- and you'll hopefully get a nice error message in the console that'll lead you to the first thing I forgot to mention :-)
I have a simple project working nicely using JSX / React / Gatsby.
I have a pre-existing page (think landing page) in HTML in another project, quite complex, nicely styled using Bootstrap 4, let's call it LandingPage.html and an associated LandingPage.css.
I would like to add the landing page to my Gatsby site. So that for example when navigating to localhost:3000/LandingPage.html the landing page gets shown, properly styled etc.
I am not clear whether I have to fully convert my pre-existing HTML into a react component / JSX?
Or whether I can just serve the LandingPage.html (and associated styling files) by placing it somewhere sensible in my Gatsby project structure?
Or whether I have to create a react "wrapper" that at "run time" reads in the content of LandingPage.html and LandingPage.css?
Note: I've tried just putting the LandingPage.html and LandingPage.css into the /public folder and actually that does work! So maybe I've answered my own question. But is the the right way to do it?
As of Gatsby v2 (don't know about previous versions), it is maybe more consistent to add the file to the /static folder.
According to the docs, the /public folder is meant to be generated automatically when building the site and should be added to .gitignore.
Files added to the /static folder will be copied to /public when building the site so it should have the same effect. More info here.