Provide a demo app

[liaochangjiang]

I am asking for help & more user-friendly guide 😄

I am new to single-spa. I followed this guide here created a app.js:

//app1.js
let domEl;
export function bootstrap(props) {
    return Promise
        .resolve()
        .then(() => {
            domEl = document.createElement('div');
            domEl.id = 'app1';
            document.body.appendChild(domEl);
        });
}
export function mount(props) {
    return Promise
        .resolve()
        .then(() => {
            // This is where you would normally use a framework to mount some ui to the dom. See https://single-spa.js.org/docs/ecosystem.html.
            domEl.textContent = 'App 1 is mounted!'
        });
}
export function unmount(props) {
    return Promise
        .resolve()
        .then(() => {
            // This is normally where you would tell the framework to unmount the ui from the dom. See https://single-spa.js.org/docs/ecosystem.html
            domEl.textContent = '';
        })
}

Then I found this playground, I thought the code above would works, so I served it from http://localhost:8080/app1.js:

When I click the start button, it failed at step 2:

SyntaxError: Unexpected token 'export'

I know this question may seems silly, but I think someone else who are new to single-spa and excited about it willing to have a try might have the same question as I do. And I found in order to play around with this playground, we need to:

1. Manually create a js file
2. Serves it using a http server
3. Add CORS Support ( The browser will block the request to http://localhost:8080

It would be nice if you can provide some sample code, so that we can start enjoy the power of single-spa asap !

Thanks.

[joeldenning]

Hi @liaochangjiang - here are some good examples. https://single-spa.js.org/docs/examples. I don't have time right now to look at this issue in more depth, but will look at it later.

[filoxo]

You could also use create-single-spa to generate a starter application.

[joeldenning]

Closing this due to inactivity. Feel free to reopen or comment further.