Slice Simulator doesn't work with HTTPS? NextJS

tomasvit6 · February 3, 2022, 2:01pm

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/>

Priyanka · February 4, 2022, 6:31am

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

tomasvit6 · February 4, 2022, 9:36am

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

Priyanka · February 9, 2022, 5:46am

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

Priyanka · February 9, 2022, 10:49am

Hello @tomasvit6

My Slice Machine team would like to know more details:

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

Thanks,
Priyanka

tomasvit6 · February 10, 2022, 1:40pm

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

Priyanka · February 15, 2022, 3:48am

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

tomasvit6 · February 24, 2022, 3:06pm

Any updates?

Fares · March 1, 2022, 4:39pm

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?

tomasvit6 · March 4, 2022, 2:01pm

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 .

Priyanka · March 8, 2022, 2:51pm

Hello, @tomasvit6

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

Thanks,
Priyanka

tomasvit6 · March 9, 2022, 12:24pm

Hi @Priyanka,

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

Priyanka · March 11, 2022, 11:03am

Hello @tomasvit6

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

Thanks,
Priyanka

Priyanka · April 6, 2022, 2:35pm

Hello @tomasvit6

Can you update prismic/next?

Thanks,
Priyanka

ian6 · November 19, 2024, 8:22am

Hey folks, sorry to necro this but... seriously?

I just spent 30 minutes trying every possible workaround other than forking your CLI. Scratch that... I did dig into your CLI and you're enforcing http even though you're on an Express JS backbone, which should have no problem with https.

The core issue is that Slice Machine's development server is intentionally HTTP-only for local development, but Chrome's aggressive HTTPS enforcement is overriding this. In other words, once I've connected to https using

"dev": "next dev --experimental-https

In package.json, Chrome's internal HSTS client can be... quite persistent. So if I've been doing something wild like, I dunno, attaching a descope authorization scheme to the front end of an app... (annoyed and sarcastic face here)... I now have to run Slicemachine in Firefox for all of eternity or suffer endless HSTS redirects.

In short, can we join the 2020s here, folks? Or are you going to wait until Next 15 takes off the experimental flag and runs https by default, and it becomes an emergency?

come.sabran · November 20, 2024, 2:40pm

Hi,

Thanks for your message. Just to be sure I'd like to understand a bit more: is your issue only about the Slice Simulator? Or also about running Slice Machine in general.

For the Slice Simulator only, this workaround will work:

Set "dev": "next dev --experimental-https"
Edit your Slice Simulator URL in slicemachine.config.json file to add https instead of http

ian6 · November 21, 2024, 4:27am

That was the first thing I tried. As the OP mentioned two years ago - the CLI is forcing http. For now I just have to run slicemachine in a non-chrome browser, though I could probably run an alternate /hosts setup to accomplish the same thing. Maybe. Chrome is pretty persnickety about hsts.

angeloashmore · November 22, 2024, 11:10pm

Hi @ian6, thanks for the feedback. It seems like this issue is not limited to the Slice Simulator, correct?

From what I understand, you have a localhost website with HSTS enabled. That config forces any localhost website to use HTTPS regardless of its port, including Slice Machine at localhost:9999.

Slice Machine does not currently support HTTPS. The start-slicemachine CLI does not have an option to specify HTTPS or provide a certificate.

As a workaround, you can run Slice Machine in a Chrome incognito browser. Doing so seems to ignore cached HSTS settings for localhost.

I will relay this information to the Slice Machine team so they understand the issue and can add it to the roadmap.

If any of this is inaccurate, please let us know.

Topic		Replies	Views
Slice machine not working on https://localhost:3000 Developing with Prismic	6	1417	May 3, 2022
Live Preview error in Next.js Developing with Prismic nextjs , live-editing	15	935	January 24, 2025
Slice-Simulator won't work on fresh Next.js setup Developing with Prismic typescript , nextjs , slice-machine	4	844	April 24, 2023
Slice Simulator "use client" issue Developing with Prismic typescript , nextjs , slice-machine	10	715	December 28, 2023
Troubleshooting: Slice Simulator Developing with Prismic	8	2980	July 26, 2023

Slice Simulator doesn't work with HTTPS? NextJS

Related topics