Slice machine not working on https://localhost:3000

Developing with Prismic
1

Hello, I need your assistance.
I am using HTTPS connection for my local project.
While I am trying to run slice machine, I have "We cannot connect to https://localhost:3000/slice-simulator." error.

I can't run my local project on HTTP because I am using auth0 tools.

What should I do?

Code in slice-simulator.jsx

import { SliceSimulator } from "@prismicio/slice-simulator-react";
import { SliceZone } from "@prismicio/react";

import { components } from "../slices/index";
import state from "../.slicemachine/libraries-state.json";

const SliceSimulatorPage = () => {
  return (
    <SliceSimulator
      sliceZone={({ slices }) => (
        <SliceZone slices={slices} components={components} />
      )}
      state={state}
    />
  );
};

export default SliceSimulatorPage;

Code in sm.json

{
  "_latest": "0.3.7",
  "apiEndpoint": "https://my-name-private.prismic.io/api/v2",
  "localSliceSimulatorURL": "https://localhost:3000/slice-simulator",
  "libraries": [
    "@/slices"
  ]
}

And while accessing https://localhost:3000/slice-simulator I have next view:

32132133
32132133726Ă—705 13.3 KB

What should I do?

P.S. I updated all libs related to prismicio, so it's not a problem with version.

3

Are you accessing the page https://localhost:3000/slice-simulator direct?

4

Yes, it's impossible to test with HTTPS, only http is working

5

Don't know if https will work but the page https://localhost:3000/slice-simulator is not meant to be for direct access. You have to run Slicemachine and view your slices from there.

8

@it14, as @jordy mentions, you should only access http://localhost:3000 to see Slice Machine. What is the reason you want to use HTTPS in a local environment?

9

For example, using auth0 in my project, so my local project runs on https://locahost:3000

You need to write in docs that https doesn't work with sliceMachine

11

I have communicated this with the team and this is what they think. One reason for this would be that slice-machine doesn’t have access to the SSL certificate, and the other would be that in our server, we only use express’s app.listen rather than

http.createServer(app) 
https.createServer(app)

You'd need to use a proxy, like nginx to handle the https part and then pass it through to slicemachine (running http)

1 Like