I am working on a project built by React/IONIC. Now I'm trying to add social sign in to the application, and to do so I need to put a file in the following directory:
/.well-known/apple-app-site-association
But the issue is, whenever I try to deploy the app on Amplify (it's connected to github repo), it doesn't deploy /public folder.
My Amplify.yml file is as follows:
version: 1.2.9 env: variables: REACT_APP_API_ENDPOINT: https://******.execute-api.ca-central-1.amazonaws.com/staging frontend: phases: preBuild: commands: ['npm ci'] build: commands: ['npm run build'] artifacts: baseDirectory: build files: - '**/*' cache: paths: - 'node_modules/**/*'
I would really appreciate your help here.
contents of public folder are deployed on root folder. So you /.well-known/apple-app-site-association will be available from https://<yourdomian.com>/.well-known/apple-app-site-association
You will have to add custom Rewrites and Redirect in AWS Amplify in AWS Console as the default Rewrite will redirect all request to Index.html for React App to handle
So far I just deployed a React app on Amplify.
And I do not ask in amplify.yml the deployment of the public/ folder. Rather I create a build of my project with a yarn build, which embeds the content of the public folder inside the new build/ folder.
So I hope Ionic does not ask to deploy the public folder on top of build/ folder.
I figured out as well that I needed to configure the URL routes inside rewrite and redirect menu of Amplify whenever my react app makes GET requests like my-domain.com/privacy.pdf.
As long as I did not specify the ".pdf" in the previously existing...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/> /index.html 200 (Rewrite)`
...rule, the routing was not able to fetch the privacy.pdf file.
I would suggest to look at the file extension of your logo too if the file extension of the sign you try to load is not included in the rewrite rule.
TL;DR
Remove all of your redirects, so it will host the public folder and its contents.
There's no need to redeploy the server. The changes are made on the fly.
Related
I deployed my static website (React app) to Azure App Service with routes.json to enable HTML5 routing fallback. My routes json is located in /public and is available under URL https://mywebsite.azurewebsites.net/routes.json.
{
"routes": [
{
"route": "/*",
"serve": "/index.html",
"statusCode": 200
}
]
}
The redirect doesn't work. What am I doing wrong?
Newest
I think you confuse the two services Web App and Static Web App. The routes.json file only takes effect in Static Web App.
According to the React documentation, execute the following command to create the my-app project.
npx create-react-app my-app
cd my-app
npm run start
Then create index2.html in the public folder.
Create a new repository in github with the name reacttest.
In the my-app directory, open cmd and execute the following command to upload the code to github.
git init
git add.
git commit -m'init'
git remote add origin https://github.com/yourname/reacttest.git
git push -u origin master
Follow the official documentation to create Azure Static Web Apps Preview. Check the release status in Action in github. You can see the default page after publishing.
At this time, directly add the routes.json file in the public folder in github. Continue to check the publishing status in Action. After the publishing is completed, you can see that the route is in effect.
When we visit the default homepage, we can see the content of index2.html.
If want see index.html, we can add /index.html in url.
I created react app with following command:
npx create-react-app my-app
Then executed the command, to create build:
npm run build
Then uploaded the build folder output to gcp storage.
And when I am trying to access the index.html file via Link URL. In Console I am getting 404 for Css and Js file referenced in index.html
When I updated the index.html with correct url link of js and css, then it is working fine.
Is it necessary to change the js and css link reference to gcp storage url link? Can't that work with relative paths?
Depends on how you uploaded your files to Cloud Storage.
You can do gsutil rsync -R local-dir gs://www.example.com to recursively copy a directory tree to Cloud Storage. Which what the -R option is used for
I've managed to deploy a react app (create-react-app) to Bluemix using cloud foundry with a sataticfile, everything is working fine except form one thing: routing.
I'm using BrowserRouter to manage routing so when you write the url's path manually I get a 404 error. I know I have to configure the staticfile to use the index.html as default, the question is how to configure this file on bluemix.
My build configuration looks like this:
And my deploy:
For now I've solved it using HashRoute, but that hash is awful and really bad for SEO as I read somewhere here.
I solved it, just create a file called: Staticfile with pushstate: enabled and save it on the public folder. I was saving it on the src folder so, when the react-app was built the Staticfile wasn't on the root directory.
I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.