Skip to content

Latest commit

 

History

History
139 lines (91 loc) · 3.61 KB

README.md

File metadata and controls

139 lines (91 loc) · 3.61 KB
Raw

SaaSup

SaaSup Preview

Demo

Check out the live demo of SaaSup at https://saaasup.vercel.app.

Explore in StackBlitz

Click the button below to open the project in StackBlitz for preview and experimentation:

Open in StackBlitz

Feel free to explore the code, make changes, and see the results in real-time!

Setup

To set up the project, make sure to install the dependencies:

# Install dependencies with pnpm
pnpm install

Storyblok Integration

Enable HTTPS for Storyblok v2

Storyblok v2 requires your app to be served over HTTPS. Follow these steps to enable HTTPS in a Nuxt 3 project:

  1. Install mkcert Install mkcert on your system. The installation instructions for macOS, Windows, and Linux can be found in the mkcert GitHub repository.

  2. Generate the certificate Run the following command in your project folder to create a valid SSL certificate:

    mkcert localhost

  3. Add the certificates to .gitignore Ensure that the certificates are ignored in version control by adding the following lines to your .gitignore file:

    # HTTPS Proxy certificates
localhost.pem
localhost-key.pem

  4. Modify your package.json Update the nuxt dev script as follows:

    "scripts": {
  "dev": "nuxt dev --https --ssl-cert localhost.pem --ssl-key localhost-key.pem"
}

Storyblok + TypeScript Setup

  1. Install Storyblok CLI Run npm i -g storyblok to install the CLI.

  2. Login to Storyblok In your terminal, use the command storyblok login to log in.

  3. Save the component schema In your project directory, save the schema of your Storyblok components to a .json file:

    storyblok pull-components --space SPACE_ID

  4. Install storyblok-generate-ts Install the TypeScript generator:

    pnpm add -D storyblok-generate-ts

  5. Add a generation script to package.json Add the following script:

    "scripts": {
  "generate-sb-types": "storyblok-generate-ts source=./components.[SPACE_ID].json target=./component-types-sb"
}

  6. Generate types Run the following command to generate TypeScript types for Storyblok components:

    pnpm generate-sb-types

  7. Use the generated types Import the generated types in your components, for example:

    import type { PageStoryblok } from '../component-types-sb'

Don't forget to rerun pull-components and generate-sb-types whenever you update your Storyblok schema.

For more details, refer to the documentation of the Storyblok CLI and storyblok-generate-ts.

Development Server

Start the development server at http://localhost:3000:

pnpm dev

Production

Build the application for production:

pnpm build

Preview the production build locally:

pnpm preview

For more information on deployment, check out the Nuxt deployment documentation.

Credits

Special thanks to VictorFlow for the beautiful design that formed the basis of the project.

License

This open-source project is available under the MIT License.