I'm not sure what I'm doing wrong. i've followed all the steps to set up a custom domain name, but maybe I'm missing something.
I followed the steps in this article so my settings look like this:
A Record # 192.30.252.153 Automatic
A Record # 192.30.252.154 Automatic
CNAME Record www myusername.github.io. Automatic
I added a CNAME file which only has my domain name in it.
I added the CNAME file to the public folder of my react app as the instructions here state.
I went to my github settings and set the domain name. It currently has a checkmark saying that my site has been published.
Going to my site here gives a 404 error. What else am I supposed to do?
I had a similar issue when trying to set a custom domain with create-react-app on a github project page.
An easy solution worked for me is:
Add a "CNAME" file in the "public" folder with only the domain in this file(start with "www" without "https://");
Change the homepage in the "package.json" file from "https://xxx.github.io/xxx" to your domain that you put in the "CNAME" file with "https://";
In Git Bash, follow the basic steps 'git add .', 'git commit -m "change"', 'git push origin master' to update the changes;
In Git Bash still, run "npm run deploy", then type the domain in your browser (clear previous history), it should show up the lovely "welcome to React" page.
Regards,
It is definitely not giving a 404. It seems some of the links to your loaded js/css files are malformed, but the index.html is loading just fine.
You should keep in mind that your ISP and your computer both try to cache information about where a given domain name should route to. This can sometimes mean that the path to the destination IP is cached and will show you the out of date resource immediately after a new CNAME is added.
Most ISPs guarantee a refresh of the related cache within 48 hours. If you need to check faster than that, I would try to find a different internet connection and device to use to access the page after you have everything set up. Smart Phones are invaluable for this, just make sure the wifi is turned off.
Related
We want to use the private repository function from Gitlab. For that we created a group and in that group we want to create several projects. I'm able to build versions and packages and publish them using semantic-version. I can see that the packages are visible at the 'Package Registry' page.
But I have trouble installing those packages in other projects using npm install. I only gets a 404 error when I run the install command. I tried several things which I can find in the gitlab docs.
This is how the structure in my account looks like:
root
company (group)
license (project)
auth (project)
The packages are called #company/license en #company/auth, according to the gitlab guidelines.
I want to be able to install all the packages and the future ones, so using the 'instance-level' should be the solution here (altough 'project level' isn't working either).
So, I added
#company:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=(personal access token)
to my .npmrc. We are not using our own instance at gitlab.
But when try to run npm install #company/license I get Not Found - GET https://gitlab.com/api/v4/packages/#company%2flicense. That is the same error which I get when I sent a GET request to that endpoint in Postman with my token as Bearer Auth.
This error also occurs when I set the project level url (https://gitlab.com/api/v4/projects/(project id)/packages/npm) in my .npmrc file.
I have tried to using a group url (https://gitlab.com/api/v4/groups/(group id)/packages/) which gives me the packages (in my browser and in postman) but when setting this URL as registry I get the same error.
NPM adds the package name in the URL and that gives indeed a 404.
What I'm doing wrong? I've seen a lot of people have this work, so it must be a stupid thing which I can't see.
I found out that my scope was not correct. I was thinking that the scope was based on the folder where the projects where located,but the scope needs to be the same as your username.
So in my case the scope needs to be #root/license. Where root is of course something like 'company name inc.', so scope will be #company-name-inc. It's the same name which you can see in the URL as first 'page' when you are opening a project or group: https://gitlab.com/company-name-inc/group-name/project-name
In my .npmrc file I can now just add the instance based entrypoint and that will work!
#company-name-inc:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=[deploy token]
I have hosted a simple static react app on github pages, Made all changes in package.json
But first the link was showing 404, I searched on the internet and tried adding a ? at the end of the link which resulted in the link showing a blank page.
Its showing a blank page now! I have tried all the solutions such as;
i. switching master and gh-pages branches
ii. adding ? at the end of the link
iii. changing "private" : true, in package.json to false
iv. adding /index.html at the end of the link
v. adding new commits and redeploying the app
These solutions didn't work, any help would be appreciated!!
link: https://iqramalik21.github.io/monsters-rolodex/
git repo: https://github.com/iqramalik21/monsters-rolodex
Couple of steps you need to follow exactly:
Create a new Repo and Enter username.github.io as the repository name. Replace username with your GitHub username. For example, if your username is octocat, the repository name should be octocat.github.io.
In your project(the one with your codebase) terminal run npm run build this will create a build folder in your project directory.
Push only the contents of the build folder onto the new repo you created with username.github.io name.
That's it you will start to see on your GitHub page!!
Note: Your page is hosted on the root route.
I understand that the normal workflow with hugo is to generate a static site using the "hugo" command, and then deploy your site by copying the public/ directory to your production web server. I don't want to do that: I just want the html files in the public/ directory to display correctly, and have links that work, when I open them in my web browser. I do not want to run the "hugo server" command.
Specifically, the links that are generated are all missing "index.html" at the end.
For example, a link to the About page will be:
file:///C:/Users/myusername/Documents/HugoTesting/quickstart/public/about/ which will open a view of that directory when I click on it. But it will display the web page properly if I can change the link to: .../public/about/index.html
How can I make that change throughout my site? I already set "relativeUrl" to true in my config file, as it says to do here:
https://gohugo.io/content-management/urls/ as it was necessary to get my index page to display properly. The documentation there says this helps to " make your site browsable from a local file system" so I know it must be possible.
I've tried using permalinks and using frontmatter to try and add "index.html" to all of my links, but hugo is adding an extra '/' to whatever I specify using permalinks, and while the "url" tag in the frontmatter works, it's not feasible for me to do for every url in every page.
I think ugly URLs configuration in Hugo might help you with this, (e.g., example.com/urls.html).
Set uglyurls = true or uglyurls: true in your site’s config.toml or config.yaml, respectively.
I am working on a React app that's running on AWS Amplify. My React app is using the react-router-dom library to route to different components. After running amplify publish in the CLI, at the root of the app (obktraining.com) everything is fine in the browser, I can also route to other components in the app just fine as well. But when I refresh my browser while I am on a route (obktraining.com/menu), I get an Access Denied error message.
I have found other posts about similar issues regarding rewrites and redirects in Amplify, but the solutions given do not work for me.
Here is an image of the error:
My Amplify app rewrites & redirects :
Again, the error only displays when I refresh on a route (obktraining.com/menu or obktraining.com/drinks) not on obktraining.com. Is the issue being caused by the react-router-dom library or is it an issue with Amplify settings? I am not sure where to go from here.
I have been facing the same error since days.The error is being caused by the amplify settings. The solution is simple,
Edit your Rewrites and redirects by adding a new rule.
source address = </^[^.]+$|.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
target address = /index.html
status = 200 (Rewrite)
Country code can be left blank
Save and try refreshing your app again. It should probably work.
use this for reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Then you can just put in (as Dhruv Godambe posted above)
</^((?!.(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$).)*$/>
as the Source address and
/index.html as your target address
You can navigate to 'rewrites and redirects' in your app from AWS Amplify console and click on edit and select open text editor, and add this piece of code in your array(if present) else put the array braces around it.
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
Reference: https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa
Reference:
https://docs.aws.amazon.com/amplify/latest/userguide/manual-deploys.html
I have faced the same problem.
I was using Manual Zip File (Compressed) download (wrong).
Here is how to deploy manually correctely:
Run this command
npm run build
Now a build folder will be created.
2. Compress the content of this folder
Not the content of the whole project.
You chnage directory to the build folder and Compress the content in side.
3. Upload that compressed file Inside the build directory
Now this should work just fine.
:)
The correct rule should be like this:
Source address: </^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>
Target address: /index.html
Status: 200
I was getting the an Access Denied error message too. The error went away when I followed the documentation described in the answer above, but then I got the white screen problem described above too.
Reviewing the steps I noticed the auto-complete for the "Destination Address" listed in the "Rewrites and redirects" settings was /. When I tried using / as the "Destination Address" instead of /index.html I no longer got the white screen and got the expected page content.
Sharing what I found in case this helps others who are seeing a white screen after fixing the error with the rewrite rule described in the answers above. (Note as of Nov 2022 the "Rewrites and redirects" setting page uses the wording "Target Address" instead of "Destination Address".)
I have faced the same problem. I was zipping build folder, but not the contents within the zip folder.
Here is how I fixed it:
Run build command
npm run build
Now a build folder will be created inside your project directory.
Open build folder.
Compress the contents of build folder, and not build folder.
Now upload this new zip created from sub files and folders from build folder.
App will run fine on AWS Amplify.
I got the same error,
I zipped the build folder first then uploaded it and got that error,
but when I just uploaded the folder without zipping it, it worked fine !! weird!!
in my application I used the port 8080
my react app is working locally but after the deploy, I faced the problem when I press any button there is no problem but if I want to refresh I see that problem "404 - File or directory not found."
I found this solution:
https://github.com/ReactTraining/react-router/blob/v3/docs/guides/Histories.md#browserhistory
Configure Your Server
"Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response."
But I don't know how can I do this
I try something but it doesn't work
TRY
npm run build, this will create build folder inside your project root folder
if you want to deploy to remote server just transfer that build
folder.
npx serve -s build on windows, if you are using mac kindly see if it is still npx.
then try to refresh every path of it
hope this works, happy coding.
Since the server cannot find the static content in the directory (i.e. not found the file /tomcat/accounts/23), it will give you 404 unless you have additional route handling.
In React routing I think you can try with HashRouter
See more details here:
https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/HashRouter.md
HashRouter vs BrowserRouter