I'm currently using react-helmet in my GatsbyJS project. I'm trying to add titles for each page, within the head. It's working in development, but not when I deploy. I've tried deploying to both Github Pages and Netlify with no success.
Development
Deployment
import React from 'react';
import Layout from '../components/Layout';
import P from '../components/designSystem/P';
import Link from '../components/designSystem/Link';
import H1 from '../components/designSystem/H1';
import Helmet from 'react-helmet';
import { siteInfo } from '../data';
const page = 'About';
export default () => (
<Layout>
<Helmet>
<title>{siteInfo.title + ' | ' + page}</title>
</Helmet>
<H1>About Me</H1>
<P>
Hi! I'm Adway. I'm currently a sophomore at Saint John's High School in
Shrewsbury, Massachusetts.
</P>
</Layout>
);
Make sure you include react-helmet (gatsby-plugin-react-helmet) in your gatsby-config.js file.
module.exports = {
plugins: [
"gatsby-plugin-react-helmet"
]
};
Related
I am new to react an trying to add external JS in react App.
However no approach is working for me as JS does not work at all.
Below is my code. What is wrong with the code?
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react';
import * as Yup from 'yup';
import ScriptTag from 'react-script-tag';
import {Helmet} from "react-helmet";
function App() {
return (
<div className='App'>
<h1>This is external javascript - Helmet</h1>
<Helmet>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
type="text/javascript" />
</Helmet>
<h1>This is external javascript - ScriptTag</h1>
<ScriptTag isHydrating={true} type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />
</div>
);
}
export default App;
You cannot use jquery cdn directly inside the react js project. Rather you can go with the below plugin to use jquery inside your react js project,
https://www.npmjs.com/package/react-jquery-plugin
Just install it with below code,
npm install --save react-jquery-plugin
I am having trouble getting images to display on github pages. I am using a repository based page. I have added in a simple img tag with in the JSX and tried using the method described in the Gatsby documentation. I feel like I'm missing something obvious.
Here is the code
import React, { useContext } from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import { ThemeContext } from 'providers/ThemeProvider';
import { Header } from 'components/theme';
import { Container, Button } from 'components/common';
import dev from 'assets/illustrations/dev.svg';
import { Wrapper, IntroWrapper, Details, Thumbnail } from './styles';
import { withPrefix } from 'gatsby'
import HeadShotPlaceHolder from 'assets/images/HeadShotPlaceHolder.jpeg'
export const Intro = () => {
const { theme } = useContext(ThemeContext);
console.log(HeadShotPlaceHolder)
return (
<Wrapper>
<Header />
<IntroWrapper as={Container}>
<Details theme={theme}>
{/* <h1>Hi There!</h1> */}
<h1>Pamela Welch</h1>
{/* <h4>I’m John and I’m a JAMStack engineer!</h4> */}
<h4>A proven professional with extensive experience in all facets of communication and marketing.</h4>
<Button as={AnchorLink} href="#contact">
Hire me
</Button>
</Details>
<Thumbnail>
{/* This is where the image tag giving me the problem is */}
<img src={ withPrefix(HeadShotPlaceHolder) } alt="I’m John and I’m a JAMStack engineer!" />
</Thumbnail>
</IntroWrapper>
</Wrapper>
);
};
and here is the result
Image Link Broken
Your code looks good, your image has its path prefixed. However, to make it effective you need to run the following snippet in the deploy command:
{
"scripts": {
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
}
}
Note the --prefix-paths flag.
More information in How Gatsby Works in GitHub Pages.
I have a react application that is meant to display portfolio items on a page. When I run npm start they show up as expected, but on my production build (build folder) the media items are missing.
I am using require() to import the media based on a value in JSON.
Here is the code:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
export class PortfolioItem extends Component {
render() {
const { img_code, id } = this.props.item;
return (
<div className='portfolio__item'>
<Link to={{
pathname: `/portfolio-details/${id}`
}}>
<img
src={require(`../assets/img_items/${img_code}`).default}
alt=''
className='img img-item'
/>
</Link>
</div>
);
}
}
export default PortfolioItem;
It is weird that this works fine locally but after git pulling the changes I made (the .default at the end) this does not work on my server.
Any ideas/comments welcome.
I am having trouble getting images to display on github pages. I am using a repository based page. I have added in a simple img tag with in the JSX and tried using the method described in the Gatsby documentation. I feel like I'm missing something obvious.
Here is the code
import React, { useContext } from 'react';
import AnchorLink from 'react-anchor-link-smooth-scroll';
import { ThemeContext } from 'providers/ThemeProvider';
import { Header } from 'components/theme';
import { Container, Button } from 'components/common';
import dev from 'assets/illustrations/dev.svg';
import { Wrapper, IntroWrapper, Details, Thumbnail } from './styles';
import { withPrefix } from 'gatsby'
import HeadShotPlaceHolder from 'assets/images/HeadShotPlaceHolder.jpeg'
export const Intro = () => {
const { theme } = useContext(ThemeContext);
console.log(HeadShotPlaceHolder)
return (
<Wrapper>
<Header />
<IntroWrapper as={Container}>
<Details theme={theme}>
{/* <h1>Hi There!</h1> */}
<h1>Pamela Welch</h1>
{/* <h4>I’m John and I’m a JAMStack engineer!</h4> */}
<h4>A proven professional with extensive experience in all facets of communication and marketing.</h4>
<Button as={AnchorLink} href="#contact">
Hire me
</Button>
</Details>
<Thumbnail>
{/* This is where the image tag giving me the problem is */}
<img src={ withPrefix(HeadShotPlaceHolder) } alt="I’m John and I’m a JAMStack engineer!" />
</Thumbnail>
</IntroWrapper>
</Wrapper>
);
};
and here is the result
Image Link Broken
Your code looks good, your image has its path prefixed. However, to make it effective you need to run the following snippet in the deploy command:
{
"scripts": {
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
}
}
Note the --prefix-paths flag.
More information in How Gatsby Works in GitHub Pages.
I'm trying to setup Helmet npm using SSR within my meteor application and I'm not sure what I need to do to get page title and metadata to appear on my homepage. There are no errors, however, I'm new to using SSR so I'm not following what I'm missing here. Very nooooob question.
Path: server/main.js
import React from "react";
import PropTypes from 'prop-types';
import { onPageLoad } from "meteor/server-render";
import { renderToNodeStream } from "react-dom/server";
import { ServerStyleSheet } from "styled-components"
import Helmet from 'react-helmet';
import App from "/imports/server/app/App";
onPageLoad(sink => {
const sheet = new ServerStyleSheet();
const appJSX = sheet.collectStyles(
<App location={sink.request.url} />
);
App.propTypes = {
location: PropTypes.object,
};
const htmlStream = sheet.interleaveWithNodeStream(
renderToNodeStream(appJSX)
);
sink.renderIntoElementById("react-root-app", htmlStream);
const helmet = Helmet.renderStatic();
sink.appendToHead(helmet.meta.toString());
sink.appendToHead(helmet.title.toString());
});
Path: client/hompage.jsx
import Helmet from 'react-helmet';
const Home = () => (
<div>
<Helmet>
<title>Homepage</title>
<meta name="description" content="This is homepage. Just Helmet SSR demo" />
<meta property="og:title" content="This is homepage. Just Helmet SSR demo for OG" />
</Helmet>
<h1>Home</h1>
</div>
);