Slice Simulator doesn't work with HTTPS? NextJS

Trying to use following localSliceSimulatorURL:
localSliceSimulatorURL: 'https://localhost:443/slice-simulator'

Doesn't it work with anything other than "http://localhost"? Or why am I getting "We can’t connect to the simulator page" error?


slice-simulator.tsx:

import React, { FC } from 'react';
import { SSRConfig, useTranslation } from 'next-i18next';
import SliceZone from 'next-slicezone';

import { AugmentedGetServerSideProps } from '@app/fetch/types';
import { makeTranslations } from '@app/localization/i18n';
import { SliceSimulator } from '@prismicio/slice-simulator-react';
import { PageLayout } from '@templates/common/layout/page-layout/PageLayout';

import state from '../.slicemachine/libraries-state.json';
import * as Slices from '../slices';

type Props = SSRConfig;

const resolver = ({ sliceName }) => Slices[sliceName];

const SliceSimulatorPage: FC<Props> = () => {
  const { t } = useTranslation();
  const tabTitle = t('sliceSimulator:title');

  return (
    <PageLayout tabTitle={tabTitle}>
      <SliceSimulator
        sliceZone={(props) => <SliceZone {...props} resolver={resolver} />}
        state={state}
      />
    </PageLayout>
  );
};

export const getServerSideProps: AugmentedGetServerSideProps<Props> = async (
  ctx
) => {
  const { translations } = await makeTranslations(ctx.locale, [
    'sliceSimulator',
  ]);

  return {
    props: translations,
  };
};

export default SliceSimulatorPage;

Also do you guys test your implementations on Typescript? I'm getting some new TS errors with the new <SliceSimulator/>

Hello Thomas,

Thanks for posting to us.

Yes, this error happened because of accessing the wrong port and value. It should be:

"localSliceSimulatorURL": "http://localhost:3000/slice-simulator"

Please find more detail in the troubleshooting guide.

Thanks,
Priyanka

Yeah okay, but why can't it be HTTPS? Why is it hardcoded to HTTP? Local development environments can be HTTPS, it's not bound to HTTP

Hello @tomasvit6

I have asked this to our Slice Machine team. I will come back to you when I hear back from them.

Thanks,
Priyanka

1 Like

Hello @tomasvit6

My Slice Machine team would like to know more details:

  1. Is your Next.js server running off HTTPS? (like non-slice simulator pages)
  2. Can you provide a minimal reproduction?
  3. Can you elaborate on your typescript errors also?

Thanks,
Priyanka

Next is running local server in HTTPS.

Wrote some reproduction here: GitHub - tomasvit6/prismic-sm-https: Slice-simulator doesn't work with HTTPS

I checked and slice-simulator works with HTTP only but as you switch to HTTPS it stops working.

Typescript errors can be seen in /pages/slice-simulator.tsx if you remove type casts as any, so instead of:

<SliceSimulator
        sliceZone={(props) =>
          (<SliceZone {...props} resolver={SliceResolver} />) as any
        }
        state={state as any}
      />

do

<SliceSimulator
        sliceZone={(props) => <SliceZone {...props} resolver={SliceResolver} />}
        state={state}
      />

and you can just run npm run lint

Hello @tomasvit6

Sorry for being delay in response. I was out of the office. I have passed the above information to my dev team, and I will come back to you as they reply to me.

Thanks,
Priyanka

Any updates?

A quick side question, our dev team, is wondering if you are running your server with root access
we don't think that running the project as root is a good idea. (root permissions are needed to access port 443)
have you tried to use 3000 port?

Hi @Fares,

Why should it be prefixed with _?
DOCS from sm:

Tried changing it - didn't do a thing.

Regarding Nginx I'm not using one, it's solely express server running on https: usage can be seen in server/server.js .

Hello, @tomasvit6

The underscore doesn’t matter anymore. My team has found the bug and fixed the issue.

Thanks,
Priyanka

Hi @Priyanka,

I updated to the latest sm version (0.3.1) but it still doesn't seem to work:

Hello @tomasvit6

I will connect with the team and come back to you asap.

Thanks,
Priyanka

Hello @tomasvit6

Can you update prismic/next?

Thanks,
Priyanka