I set up a react portfolio on github, and here's the build folder.
The problem is: I have to alter the chunk.css file, after the npm run build, from url(danielmarostica.github.io/static/media/Montserrat-Regular.ee653992.ttf) to url(../media/Montserrat-Regular.ee653992.ttf), otherwise github won't load fonts. Why is that? If you access the link directly, you can even download the font.
How can I automatically build the website with the correct path?
Original source files.
The url MUST start with https:// in order to work.
Thanks to #heretic-monkey.
Related
When i try to deploy my react app to github pages with the package gh-pages, the result page is blank.result page
The page I am trying to deploy is here: LINK
I don't know if it matters but I am currently using the free domain given to me by GitHub: www.elvas.me
I tried following the react official docs: Link, but it didn't work for me... Perhaps it's because I am using vite and not create-react-app?
*Edit*
Found out that the site is trying to get the .js and the .css from the wrong place.
I just don't know what I am doing wrong...
Ok, so to solve this the only thing that I had to do was to add base:"{repName}" to the vite.config.ts file.
Source: https://vitejs.dev/guide/static-deploy.html
The images were not loading, I used this to fix them:
Github pages vite JS build not showing the images
I see that you have managed to deploy your React project to Github pages successfully, but here is how I did it in case anyone needs help:
First things first, make sure that your ".git" folder and your project are in the same folder.
Run npm run build. You should have a dist folder now.
Open the file vite.config.js (or .ts).
Add the base file with your repository name. Include the two /.
Example: let's say your github project's URL is https://github.com/atlassian/react-beautiful-dnd.
export default defineConfig({
base: "/react-beautiful-dnd/",
plugins: [react()],
});
Open your .gitignore file and delete the dist line from it. You want to make sure that the dist folder is pushed to github.
git add .
git commit -m "deploy"
git subtree push --prefix dist origin gh-pages
Wait for a couple minutes (in my case it took 4 minutes) and open the page. In the example above, the URL would look like this: https://atlassian.github.io/react-beautiful-dnd
In case it's still showing a blank page, it's very likely to do with the step number 3. Ensure you added the correct repository URL and that it begins and ends with the / sign.
That is about it, I hope it helps. I used this blog post for guidance, it is a more detailed explanation of the above.
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
I was trying to deploy a project I made in ReactJS - a tetris game to be exact - and I am coming up with the following error:
On a different stack-overflow post, I read that most likely this is happening because
Most likely there is a reference to manifest.json somewhere in the project, while the file/resource itself does not exist and that I should look for link tags containing rel=manifest.
So I went into my index.html folder and removed the following:
<link rel="manifest" href="/manifest.json">
So after making the changes and updating my code, I pushed to Netlify (netlify deploy, netlify open) and I keep getting the same error. Does anyone know what I may be doing wrong? The project runs perfectly on localhost.
EDIT: adding Network tab image
You do not need to remove manifest.json file. What you need to do is simply connect source code to the version control.
You need to add _redirects file to the public folder. (no extension for this file). add this line to it.
/* /index.html 200
From this, we hope to show components accordingly whenever link updates with components.
Then follow the below steps to host your site easily,
Add your source code to the Bitbucket repository. (connect your local folder to repo)
If you have build remove that folder.
Go to Netlify and link your Bitbucket repository and desired domain.
That's it! Whenever you push the new version to the master branch it will auto-deploy. (No need to build anymore! - make sure to enabled auto-deploy settings to the master branch)
Just use these tools easily. Don't use a lengthy way and make things hard.
I'm building a react website. The goal for it is to be able to simply put the finished website on a USB key and be able to use it on a computer without any internet access.
I'm using react v16.6. I've already tried to simply open the build/index.html file but I received a few Not allowed to load local resource: file:///static/... and the page was blank.
This projects is using a JSON file, pictures and videos.
I don't really know where I should go from here to be able to this.
Thanks for any help.
Based on some of your details, I'm assuming you're using create-react-app.
If you read the error message or look in build.html you'll see that the built site is trying to load your javascript from /build/static/js/.... This would effectively be trying to load the files from the root of the file system, not the current directory. You can set "homepage": "." in package.json and the built site will load the files correctly. This is documented in the message that you get when you do npm run build, which also links to https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment for more details.
I built my polymer project and deployed it with the firebase command. I followed the instruction on the polymer site. In Chrome on my Mac it works, but on my mobile(Chrome and Safari) and Safari on my Mac it display an empty page.
Can anybody help me out?
best regards
UPDATE: the dependency problem has been fixed with v0.16.0 which deployed this evening 8/24/2016. I have kept the below workaround just for reference.
This is a known issue: https://github.com/Polymer/polymer-cli/issues/347
includeDependencies stipulated in polymer.json is not being processed.
Here's the remedy for now:
The 'polymer build' process is not including the polyfill in the build even when you include it in the polymer.json dependencies.
This polyfill is necessary for browsers which do not support web components.
Therefore until it is fixed it needs to be added manually...
After running 'polymer build':
open the app's bower_components folder
copy the webcomponentsjs folder
open the build folder
paste the webcomponentsjs folder in the bundled/bower_components and unbundled/bower_components
run firebase deploy
(Do this for all dependencies you require.)