I'm having trouble getting the apple-touch-icon to work in my NextJS app. I have an image called apple-touch-icon.png at the root of my project and I am using next/Head in my application's app component (React app, but not CRA) using the following:
function App({ Component, pageProps }) {
return (
...
<Head>
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
</Head>
...
)
When I inspect my application I can see the tag in the , but dragging from the url bar to my desktop from localhost still shows:
I also see the <link> in the <head> in a deployed instance of my application as well, but the touch icon image is not downloaded to the desktop.
Thoughts?
Related
I am making a react app. But in the title bar, it is showing 'React App' with React logo. I want to change it to my website name and logo, and how can I do that ?
If you want to change the title, you can go to: public/index.html, and then change the <title>React App </title>
To change your logo, go to the public folder and change the favicon.ico.
If you follow these steps, your logo and title will get changed.
If it helps you, please mark as accepted answer.
you can change title and icon on public/index.html in react project.
<head>
...
...
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>React App</title>
...
...
</head>
Making changes in public/index.html would only change the default values (title and favicon), and it will be set for all pages. More on this method and some (complex) alternatives in the official docs: https://create-react-app.dev/docs/title-and-meta-tags/
...or you can use React Helmet, a third-party library recommended in the official docs as well: https://github.com/nfl/react-helmet. It will allow you to set page title/favicon/other head elements from the components itself.
Example code using React Helmet:
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://example.com/example" />
</Helmet>
...
</div>
);
}
};
You can change your page title by doing something like this.
const pageTitle = `${title}`;
Then:
document.title = pageTitle;
you can change the logo from ./assets/index.htm and change the href.
and input your image to ./assets/
I have a project made with React/Next.js.
This is the file directories.
What I am trying to do is have the user GET - /api/grademate/pay and return the success page.
Fetching /api/grademate/pay works without a problem.
The problem is, while testing, the success page does not load when I try to visit it manually.
This is what my index.js file looks like inside the success folder:
import Head from 'next/head'
import Image from 'next/image'
import styles from '../../../../styles/Home.module.css'
export default function Success() {
return (
<div className={styles.container}>
<Head>
<title>Payment Success</title>
<meta name="description" content="Your payment was successful!" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Payment Successful!
</h1>
</main>
</div>
)
}
When I try to visit /api/grademate/pay/success, nothing happens and the page just loads and this error is printed:
API resolved without sending a response for /api/grademate/success,
this may result in stalled requests.
Keep in mind I am new to the world of React and Next.js
In Next.js, the api folder is used for API routes only.
Your normal page components should not be inside the api folder, they should live under the pages folder directly.
For instance, your pages folder structure could look like the following.
pages/
api/
grademate/
pay.js
grademate/
pay/
success/
index.js
_app.js
index.js
Your Success page can then be accessed at /grademate/pay/success.
I can't get the baseUrl parameter to work in react-native-webview. My project structure is as follows:
root
---> _tests _
---> android
-------> web
---> ios
---> node_modules
---> src
-------> components
------------> web
------------> MyComponent.js
---> web
I have inserted the web folder 3 times as shown (actually only need to once, this is just for testing). Each 'web' folder contains ponies.jpg. However, nothing is picked up by React Native. I just get 4 broken images with the alt (i.e. 'Ponies') showing. I have also tried using baseUrl: 'web/' to no avail. Here is the code in MyComponent.js:
import React from 'react';
import {View, Text, StyleSheet, Image} from "react-native";
import {WebView} from "react-native-webview";
var html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img src="ponies.jpg" alt="Ponies" height="42" width="42">
<img src="ponies.jpeg" alt="Ponies" height="42" width="42">
<img src="./ponies.jpg" alt="Ponies" height="42" width="42">
<img src="./ponies.jpeg" alt="Ponies" height="42" width="42">
</body>
</html>
`;
export default class MyComponent extends React.Component {
render() {
return (
<View style = {styles.container}>
<WebView
style = {styles.webview}
source = {{html: html, baseUrl: 'web/'}}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 350,
width: 350
},
webview: {
height: 350,
}
})
Thankyou!
OK so I found a solution/workaround for android :D Have actually seen this in another answer but am going to expand a little:
baseUrl needs to be 'file:///android_asset/'.
You then create a directory in the android folder i.e. 'root/android/app/src/main/assets' (see this answer for details how to reference an asset in a library project).
These two folders are now the same. anything you put in assets should be seen by the webview.
IMPORTANT - I then had to rerun 'react-native run-android' to get the image to show up.
Currently, your web folder is inside the android folder
Add a folder web and used this structure:
app/web/ponies.jpg
Use web/ as base URL.
The final piece of the puzzle is to add the web folder to the XCode project (do this in XCode). Otherwise, the files in the web folder are not included in the bundle built for the ios device.
Note: where app is the root of the application.
I am new to react.js. I downloaded a theme which have external JavaScript libraries i.e bootstrap.min.js , jquery.min.js, slider.js, jquery-flexslider.min.js.
I created a React app using create-react-app and I copied all the external JavaScript libraries and CSS files in index.html of the public folder of my react app and copied all the html of index.html of my theme in app.js which I downloaded. All the CSS are working fine but the JavaScript libraries are not working on the page.
Following is the demo of how I included the css files and javascript libraries in index.html of the public folder.
<script src="/assets/javascript/jquery.min.js"></script>
<script src="/assets/javascript/bootstrap.min.js"></script>
<script src="/assets/javascript/jquery.easing.js"></script>
<script src="/assets/javascript/jquery-waypoints.js"></script>
<link rel="stylesheet" type="text/css"href="/assets/stylesheets/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/style.css"/>
<link rel="stylesheet" type="text/css" href="/assets/stylesheets/responsive.css"/>`
Now my question is, how should I include the JavaScript libraries so that it start working. I tried to put all the files in the src folder of my react app but it still not working.
You should consider using react-bootstrap instead of jquery and a minified bootstrap file. By using react-bootstrap you get bootstrap 3 (4 is in the works) as nicely designed react components that you can selectively import and use. So then you can
import React from 'react'
import{ string } from 'prop-types'
import { Col, Row, Label } from 'react-bootstrap'
const PrettyThing = ({ thing }) => (
<Row>
<Col xs={9} xsOffset={1}>
<Label bsStyle="success">{thing}</Label>
</Col>
</Row>
)
PrettyThing.propTypes = { thing: string.isRequired }
export default PrettyThing
and webpack will handle how that's all sliced and diced so only the css you need gets built.
see https://react-bootstrap.github.io/getting-started/introduction/ for more info.
I have installed Expo XDE, and created a new project funproject. I understand that the XDE is meant for devices and I could connect my virtual devices.
However, I would also like to reuse the same code base for a web application.
I have broused to the location on my localhost where the app should be.
http://localhost:19001/
This looks right, I can see the index.html page. It's actual file path is.
funproject\node_modules\react-native\local-cli\server\middleware\index.html
Here are the contents of the index.html
<!DOCTYPE html>
<html>
<head>
<title>React Native</title>
</head>
<body>
<p>React Native packager is running.</p>
<p>Visit documentation</p>
</body>
</html>
So I added a div for the content and the script, app.js
<!DOCTYPE html>
<html>
<head>
<title>React Native</title>
</head>
<div id="content"></div>
<body>
<p>React Native packager is running.</p>
<p>Visit documentation</p>
</body>
</html>
<script type="text/javascript" src="../app.js"></script>
I am new to react, but the idea that I can target web, and mobile all in one, is very enticing. Unfortunately this does not work! When I use chrome developer tools, I am getting this error for line 1 of app.js
Uncaught SyntaxError: Unexpected token import app.js:1
Here is the default generated app.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
You had it mostly wrong, actually -- all wrong.
Let's start with;
However, I would also like to reuse the same code base for a web application.
So this is wrong, the project you are working on is a native project, which uses the component based rendering logic of react, and produces real legit native ui elements for android or iOS.
Even though you are still using "react" this does not mean you can reuse the app in your browser.
The local server that started in a development interface, or a package delivery and update system (packager) for your phone or simulator (in order to access it via wifi network).
That server and the context of it is just a development tool for you.
You should first understand the logic behind tech you are using; https://facebook.github.io/react-native/docs/getting-started.html