Entering direct subpage gives 404error

🙋Get Help
1

Hi guys

when entering a direct subpage from a link, for example https://skibickifoto.pl/kontakt/ get a 404 error, but If I enter to subpage ‘kontakt’ from navigation in main page entering correctly.
Repository of my project: https://github.com/Borowski-shovv/frontity-photographer-page;

Thanks

2

Hi @rborowski.shovv

I’ve cloned your repo and I’m not able to reproduce the problem when I run the project on localhost, so I don’t think there’s an issue with your code.

That said, it might be worth taking a look at this similar issue which may guide you to a solution.

3

Unfortunately, the problem has not gone away.

I have noticed a new one, on the subpage where I download photos or videos from the API after refreshing the content is not downloading.

Below I put component which is fetching photos

const AstroPage = ({ state, libraries }) => {
  const [currentImage, setCurrentImage] = useState(0);
  const [viewerIsOpen, setViewerIsOpen] = useState(false);
 
  const [data, setData] = useState({
    isReady: false,
    items: []
  });

  useEffect(() => {
    getMedia( libraries, state, setData);
   
  }, [])

  const images = data.isReady && data.items.map(({ type, id }) => state.source[type][id])
  console.log('data', images)
  let imageLinks = [];
  let imageSmall = [];

   images && images.map(image => {
     imageLinks.push({
         src: image.media_details.sizes.full.source_url,
          width: 4,
          height: 3,
          title: image.title.rendered,
       })
     });

   images && images.map(image => {
      imageSmall.push({
         src: image.media_details.sizes.medium.source_url,
         width: 4,
         height: 3,

       })
     });
  const openLightbox = useCallback((event, { photo, index }) => {
    setCurrentImage(index);
    setViewerIsOpen(true);
  }, []);

  const closeLightbox = () => {
    setCurrentImage(0);
    setViewerIsOpen(false);
  };

  return (
    <>
    {data.items.length === 0 ? 

      < BackdropWrapper>
          <Indicator color="inherit" />
      </ BackdropWrapper>
    
    :
    <GalleryWrapper>
      <Gallery photos={imageSmall} onClick={openLightbox}/>
      <ModalGateway>
      {viewerIsOpen ? (
        <Modal onClose={closeLightbox}>
          <Carousel
            currentIndex={currentImage}
            views={imageLinks.map(x => ({
              ...x,
              srcset: x.srcSet,
              caption: x.title,
              
            }))}
          />
        </Modal>
      ) : null}
    </ModalGateway> 
</GalleryWrapper>
    }
    </>
  );
};

export default connect(AstroPage)

const getMedia = async ( libraries, state, setData) => {

  // Get other images
  const response = await libraries.source.api.get({
    endpoint: "media",
    params: { 
        parent: "43",
        per_page: '100'
    }, 
  });

  const entitiesAdded = await libraries.source.populate({ response, state });
  await setData({
    isReady: true,
    items: entitiesAdded
  });

};

Thank you,
I noticed problems after put project on the server, on localhost everything is fine.

1 Like
4

Hi @rborowski.shovv

On my localhost everything worked fine too, both with npx frontity dev and with npx frontity build -> npx frontity serve.

Where are you hosting your site? Can you provide details about your configuration.

5

host is on proserwer.pl
node version 12.9.0
my app.js
var frontity = require("./build/server").default;

var http = require("http"); 

var server = http.createServer(frontity); 

server.listen()

I noticed that after refresh page component is empty