### Create and Start sku Project
Source: https://github.com/seek-oss/sku/blob/master/README.md
This snippet demonstrates how to create a new project using the sku CLI and start the local development environment. It first uses `pnpm dlx @sku-lib/create` to scaffold a new application, then navigates into the project directory, and finally starts the development server with `pnpm start`. It also shows an alternative for creating the project in the current directory.
```sh
pnpm dlx @sku-lib/create my-app
cd my-app
pnpm start
```
```sh
pnpm dlx @sku-lib/create .
pnpm start
```
--------------------------------
### Start Development Server
Source: https://github.com/seek-oss/sku/blob/master/packages/create/templates/base/README.md
Starts a local development server for the project. This command is essential for local development and testing.
```sh
$ <%= data.startScript %>
```
--------------------------------
### Start Documentation Development Server
Source: https://github.com/seek-oss/sku/blob/master/CONTRIBUTING.md
This command starts a local development server to preview changes made to the documentation site.
```sh
pnpm start:docs
```
--------------------------------
### Start Storybook Development Server
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Command to serve a development version of your Storybook application.
```sh
pnpm storybook dev
```
--------------------------------
### Setup Hosts Script in package.json
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-site.md
Adds a script to the package.json file to automate the setup of host configurations on the system. This script, 'sku setup-hosts', is used to point the defined hosts to localhost.
```json
{
"scripts": {
"setup-hosts": "sku setup-hosts"
}
}
```
--------------------------------
### Install Storybook Dependencies
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Installs the necessary development dependencies for Storybook integration with React and Webpack 5, including Babel compiler support.
```sh
pnpm install -D storybook @storybook/react @storybook/react-webpack5 @storybook/addon-webpack5-compiler-babel
```
--------------------------------
### Install Vitest Dependencies
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/vite.md
Installs Vitest and the sku Vitest adapter as development dependencies using pnpm.
```bash
pnpm add -D vitest @sku-lib/vitest
```
--------------------------------
### Setup Test Hosts
Source: https://github.com/seek-oss/sku/blob/master/CONTRIBUTING.md
This command is used to add necessary entries to the /etc/hosts file for testing purposes. It requires sudo privileges.
```sh
sudo pnpm setup-test-hosts
```
--------------------------------
### Example Sku Render Entry Point
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/static-rendering.md
This TypeScript/React example demonstrates a render entry point for sku. It includes functions to render the React application to a string and to generate the full HTML document, incorporating app output, head tags, and body tags.
```tsx
import React from 'react';
import { renderToString } from 'react-dom/server';
import type { Render } from 'sku';
import App from './App';
export default {
renderApp: ({ SkuProvider, environment, site, route }) =>
renderToString(
,
),
renderDocument: ({ app, bodyTags, headTags }) => `
My Awesome Project
${headTags}
${app}
${bodyTags}
`,
} satisfies Render;
```
--------------------------------
### Starting the sku Development Server
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/building-the-app.md
Command to launch the local development server provided by sku. This command typically opens the application in a browser tab, usually at http://localhost:8080.
```bash
$ npm start
```
--------------------------------
### Execute Host Setup
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-site.md
Command to execute the 'setup-hosts' script defined in package.json. This requires root privileges to modify the system's host configuration.
```sh
$ sudo npm run setup-hosts
```
--------------------------------
### Custom SKU Config File
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Shows how to use a custom configuration file with the 'sku start' command using the --config parameter.
```Shell
$ sku start --config sku.custom.config.ts
```
--------------------------------
### Install Vanilla Extract CSS
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/styling.md
Installs the necessary `@vanilla-extract/css` package using Yarn. This is a prerequisite for using Vanilla Extract for styling.
```sh
yarn add @vanilla-extract/css
```
--------------------------------
### Package.json Scripts for sku
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/building-the-app.md
Defines the essential npm scripts for starting and building an application using sku. These scripts automate the development and production build processes.
```json
{
"scripts": {
"start": "sku start" // or `sku start-ssr` for SSR projects
"build": "sku build" // or `sku build-ssr` for SSR projects
}
}
```
--------------------------------
### Setup Hosts File
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/cli.md
Updates the hosts file to point configured hosts to the local machine. Requires sudo privileges.
```sh
sudo sku setup-hosts
```
--------------------------------
### Old Render Entry Style (JavaScript)
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
Shows the previous implementation of a render entry point for server-side rendering, which returned HTML for each route.
```javascript
// old style render entry
import React from 'react';
import { renderToString } from 'react-dom/server';
export default ({ publicPath }) => {
const renderHTML = (route) => `
My Awesome Project
${renderToString()}
`;
// return HTML for each route
return {
'/': renderHTML('/'),
'/details': renderHTML('/details'),
};
};
```
--------------------------------
### Configure Test Setup Script
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/testing.md
Shows how to specify a custom setup script in the sku configuration file. This script runs before tests and can be used to configure testing libraries or add custom matchers.
```typescript
export default {
setupTests: 'src/setupTests.ts',
} satisfies SkuConfig;
```
--------------------------------
### Start sku development server for statically-rendered application
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/cli.md
Starts the sku development server for a statically-rendered application. It supports overriding the default webpack stats preset.
```sh
sku start
```
```sh
sku build --stats=errors-only
```
--------------------------------
### Remove Route Specific Entries
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v8.0.0.md
Removes route-specific entries in favour of `loadable-components` for static rendering configurations. This simplifies the routing setup and encourages the use of dynamic code splitting.
```diff
module.exports = {
routes: [
{
route: '/',
name: 'home',
- entry: './src/home'
}
]
};
```
--------------------------------
### Start sku development server for server-rendered application
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/cli.md
Starts the sku development server for a server-rendered application. It supports overriding the default webpack stats preset.
```sh
sku start-ssr
```
```sh
sku build --stats=errors-only
```
--------------------------------
### Client Entry Point for React Hydration
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/building-the-app.md
Example of a client-side entry point written in TypeScript, demonstrating how to hydrate a React application using `hydrateRoot` from `react-dom/client`. This code runs in the browser to make the application interactive.
```typescript
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
export default () => {
hydrateRoot(document.getElementById('app')!, );
};
```
--------------------------------
### New Render Entry Style (JavaScript)
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
Illustrates the updated render entry point, requiring separate 'renderApp' and 'renderDocument' functions. It also shows how to use 'headTags' and 'bodyTags' for asset inclusion.
```javascript
// new style render entry
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
export default {
renderApp: ({ environment, site, route }) =>
renderToString(),
renderDocument: ({ app, bodyTags, headTags }) => `
My Awesome Project
${headTags}
${app}
${bodyTags}
`,
};
```
--------------------------------
### SSR Server Entry Point
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/server-rendering.md
Defines the server entry point for SSR, including a render callback for handling requests, optional middleware, and a callback to execute after the server starts.
```tsx
import template from './template';
import middleware from './middleware';
import type { Server } from 'sku';
export default (): Server => ({
renderCallback: ({ SkuProvider, getBodyTags, getHeadTags }, req, res) => {
const app = renderToString(
,
);
res.send(
template({ headTags: getHeadTags(), bodyTags: getBodyTags(), app }),
);
},
middleware: middleware,
onStart: (app) => {
console.log('My app started 👯♀️!');
app.keepAliveTimeout = 20000;
},
});
```
--------------------------------
### Default SKU Configuration
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Provides an example of a default sku.config.ts file, specifying client entry, render entry, public directory, public path, and target directory.
```TypeScript
import type { SkuConfig } from 'sku';
export default {
clientEntry: 'src/client.js',
renderEntry: 'src/render.js',
public: 'src/public',
publicPath: '/',
target: 'dist',
} satisfies SkuConfig;
```
--------------------------------
### Access site configuration in client entry
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This client-side JavaScript code demonstrates how to access the 'site' configuration that was passed from the server render. It uses `window.APP_CONFIG` to retrieve the site-specific data for the React application.
```javascript
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
hydrate(, document.getElementById('app'));
```
--------------------------------
### Configure Routes and Public Path (JavaScript)
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
Demonstrates how to configure the new 'routes' option and the mandatory 'publicPath' in sku.config.js for static rendering. This replaces the old history API fallback for local development.
```javascript
module.exports = {
routes: [
{ name: 'homePage', route: '/' },
{ name: 'detailsPage', route: '/details' },
],
publicPath: 'www.cdn.com/my-app', // not used local development
};
```
--------------------------------
### Import Jest DOM Matchers
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/testing.md
An example of a `setupTests` script that imports custom matchers from `@testing-library/jest-dom`, enabling enhanced assertions for DOM testing with libraries like React Testing Library.
```typescript
import '@testing-library/jest-dom';
```
--------------------------------
### Library Entry Point Default Export
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/libraries.md
The public API of your library entry point must be exported using a default export. This example demonstrates a simple default export function.
```javascript
export default () => {
console.log('Hello from my library!');
};
```
--------------------------------
### Access app config in client entry
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This client-side JavaScript code shows how to access environment-specific application configuration data that was embedded in the HTML by the server render. It retrieves the configuration from `window.APP_CONFIG`.
```javascript
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App';
const config = window.APP_CONFIG;
hydrate(, document.getElementById('app'));
```
--------------------------------
### sku Configuration for Routing
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/code-splitting.md
Example sku configuration file (`sku.config.js`) specifying routes and a public path for CDN deployment. This configuration is essential for setting up route-based code splitting.
```js
export default {
routes: ['/', '/details'],
publicPath: 'https://somecdn.com',
};
```
--------------------------------
### Lookup environment-specific config in server render
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This code illustrates how to handle environment-specific configurations within the server render entry. It defines a configuration object and uses the 'environment' parameter to select the appropriate settings, such as API URLs.
```javascript
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
const config = {
development: {
apiUrl: 'http://localhost:1234',
},
production: {
apiUrl: 'https://real.api',
},
};
export default {
renderApp: ({ environment }) => {
// renderApp is called for each environment
const { apiUrl } = config[environment];
return renderToString();
},
renderDocument: ({ environment, app, bodyTags, headTags }) => `
My Awesome Project
${headTags}
${app}
${bodyTags}
`,
};
```
--------------------------------
### Update server entry to render headTags and bodyTags
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This code updates the server entry point for sku applications. It replaces the previous method of rendering static assets like 'main.js' and 'styles.css' with a dynamic approach that renders 'headTags' and 'bodyTags'.
```javascript
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
const render = ({ headTags, bodyTags }) => `
My Awesome Project
${headTags}
${renderToString()}
${bodyTags}
`;
export default ({ headTags, bodyTags }) => ({
renderCallback: (req, res) => {
res.send(render({ headTags, bodyTags }));
},
});
```
--------------------------------
### Pass site option to React app in server render
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This code shows how to pass the 'site' configuration option from sku's render entry to the React application. It utilizes React's server-side rendering capabilities to inject the site information.
```javascript
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
export default {
renderApp: ({ site }) => {
// renderApp is called for each site
return renderToString();
},
renderDocument: ({ site, app, bodyTags, headTags }) => `
My Awesome Project
${headTags}
${app}
${bodyTags}
`,
};
```
--------------------------------
### Environment-Specific Code with Webpack
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/extra-features.md
This example illustrates how sku configures webpack to replace process.env.NODE_ENV, enabling environment-specific code. It shows code that executes different functions based on the environment and how it's transformed in development and production.
```js
import someDevOnlyFunction from './some-dev-only-function';
import someProdOnlyFunction from './some-prod-only-function';
if (process.env.NODE_ENV === 'development') {
someDevOnlyFunction();
}
if (process.env.NODE_ENV === 'production') {
someProdOnlyFunction();
}
```
```js
import someDevOnlyFunction from './some-dev-only-function';
import someProdOnlyFunction from './some-prod-only-function';
if ('development' === 'development') {
someDevOnlyFunction();
}
if ('development' === 'production') {
someProdOnlyFunction();
}
```
```js
import someProdOnlyFunction from './some-prod-only-function';
someProdOnlyFunction();
```
--------------------------------
### Update Client Entry Export
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v8.0.0.md
Changes the client entry export from direct hydration to a function that performs hydration. This adjustment is for the client-side rendering setup, ensuring compatibility with new sku features.
```diff
import React from 'react';
import { hydrate } from 'react-dom';
import App from './App/App';
+export default () => {
hydrate(, document.getElementById('app'));
+};
```
--------------------------------
### Build Storybook for Production
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Command to build a deployable, production-ready version of your Storybook.
```sh
pnpm storybook build
```
--------------------------------
### sku Configuration Options
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/building-the-app.md
Illustrates how to configure the sku development server using a sku.config.js file. Key options include setting the preferred server port and the initial path to open.
```javascript
export default {
// The preferred port you want the server to run on. sku will automatically
// find a free port if this one is busy.
port: 5000,
// Optional parameter to set the page to open when the
// development server starts, defaults to your first route
initialPath: '/my-page',
};
```
--------------------------------
### Configure Storybook with SKU Presets
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Provides a minimal Storybook configuration file (`.storybook/main.ts`) that utilizes SKU's Babel and webpackFinal presets for compatibility. It includes settings for stories, framework, and addons, ensuring faster startup with `fsCache`.
```ts
// .storybook/main.ts
import { babel, webpackFinal } from 'sku/config/storybook';
import type { StorybookConfig } from '@storybook/react-webpack5';
export default {
stories: ['../src/**/*.stories.tsx'],
framework: {
name: '@storybook/react-webpack5',
options: {
builder: {
fsCache: true, // For faster startup times after the first `storybook dev`
},
},
},
addons: [
'@storybook/addon-webpack5-compiler-babel', // Required for Storybook >=8.0.0
],
babel,
webpackFinal,
} satisfies StorybookConfig;
```
--------------------------------
### Configure DevServer Middleware for Storybook
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Sets up the `devServerMiddleware` for Storybook by creating a `.storybook/middleware.js` file that re-exports the middleware from a specified path.
```js
// .storybook/middleware.js
import devServerMiddleware from '../devServerMiddleware.js';
export default devServerMiddleware;
```
--------------------------------
### Compile Translations and Run Storybook
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Compiles translations for multi-language applications before running the Storybook development server or build command.
```sh
pnpm sku translations compile && pnpm storybook dev # or pnpm storybook build
```
--------------------------------
### Consume Pseudo-localized Language
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-language.md
Example of how to consume the auto-generated `en-PSEUDO` language within a React application using the VocabProvider component.
```jsx
```
--------------------------------
### Customize Jest Configuration
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
An example of how to dangerously set Jest configuration in sku.config.ts by modifying the skuJestConfig. This allows for advanced customization of Jest settings.
```TypeScript
export default {
dangerouslySetJestConfig: (skuJestConfig) => ({
...skuJestConfig,
someOtherConfig: 'dangerousValue',
}),
} satisfies SkuConfig;
```
--------------------------------
### Initialize a new sku project
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/cli.md
Initializes a new sku project. It is recommended to use `@sku-lib/create` instead. This command supports specifying a project name and package manager.
```sh
pnpm dlx sku init my-app
```
```sh
pnpm dlx sku init my-app --package-manager=npm
```
```sh
pnpm dlx sku init my-app --verbose
```
--------------------------------
### Customize TypeScript Configuration
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
An example of how to dangerously set TypeScript configuration in sku.config.ts by modifying the skuTSConfig. This allows for advanced customization of TypeScript compiler options.
```TypeScript
export default {
dangerouslySetTSConfig: (skuTSConfig) => ({
...skuTSConfig,
include: ['packages', 'site'],
exclude: ['**/scripts'],
}),
} satisfies SkuConfig;
```
--------------------------------
### Customize ESLint Configuration
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
An example of how to dangerously set ESLint configuration in sku.config.ts by modifying the skuEslintConfig. This allows for advanced customization of ESLint rules and plugins.
```TypeScript
import customPlugin from 'custom-eslint-plugin';
export default {
dangerouslySetESLintConfig: (skuEslintConfig) => [
...skuEslintConfig,
{
plugins: {
customPlugin,
},
rules: {
'customPlugin/rule1': 'warn',
},
},
],
} satisfies SkuConfig;
```
--------------------------------
### Checkout Master and Pull Latest Changes
Source: https://github.com/seek-oss/sku/blob/master/CONTRIBUTING.md
Before starting new work, ensure you are on the master branch and have the latest updates by checking out the master branch and pulling changes.
```sh
git checkout master
git pull
```
--------------------------------
### Serve Statically Rendered Application
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/cli.md
Serves a production build of a statically-rendered application locally. Requires 'sku build' to be run first and allows specifying the port and site for serving.
```sh
sku serve
sku serve --port=8080
sku serve --site=seekAnz
```
--------------------------------
### Build Production Assets
Source: https://github.com/seek-oss/sku/blob/master/packages/create/templates/base/README.md
Builds the project's assets for production deployment. This command optimizes the code for performance and distribution.
```sh
$ <%= data.buildScript %>
```
--------------------------------
### Run Test Suite
Source: https://github.com/seek-oss/sku/blob/master/CONTRIBUTING.md
Execute the local test suite to ensure your changes meet the project's quality standards.
```sh
pnpm run test
```
--------------------------------
### Run Unit Tests
Source: https://github.com/seek-oss/sku/blob/master/packages/create/templates/base/README.md
Executes the unit tests for the project. This command ensures the code quality and functionality.
```sh
$ <%= data.testScript %>
```
--------------------------------
### Create SKU Config File
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Demonstrates how to create a sku.config.ts file in the project root using the touch command.
```Shell
$ touch sku.config.ts
```
--------------------------------
### Remove .eslintrc (Bash)
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
Instructs users to remove the existing .eslintrc file as it is now managed by sku. This ensures consistency and allows for live ESLint feedback during development.
```bash
$ git rm .eslintrc
```
--------------------------------
### Run Fixture Scripts
Source: https://github.com/seek-oss/sku/blob/master/CONTRIBUTING.md
Execute package.json scripts within fixture directories using a fuzzy search for the fixture name. Running without arguments lists all available fixtures and scripts.
```sh
pnpm fixture [fuzzy-fixture] [script]
```
--------------------------------
### Increase Node Memory Limit for Builds
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Example of increasing the Node.js memory limit using the NODE_OPTIONS environment variable to prevent heap exhaustion during builds with production source maps enabled.
```bash
NODE_OPTIONS=--max-old-space-size=4096 sku build
```
--------------------------------
### Import Translations in React Component
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-language.md
This example demonstrates how to import translations and use the `useTranslations` hook from '@vocab/react' within a React component. It allows accessing translated strings using a key.
```tsx
import translations from './App.vocab';
import { useTranslations } from '@vocab/react';
export function MyComponent() {
const { t } = useTranslations(translations);
return
{t('my key')}
;
}
```
--------------------------------
### Define Library Entry Point with libraryEntry
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Specifies the entry file for a library project. SKU assumes the project is a library if this is set and requires the file to export its API.
```js
export default () => {
console.log('Hello from my library!');
};
```
--------------------------------
### Update port and serverPort in sku config
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This snippet demonstrates the change in how ports are specified in sku.config.js. The 'port' object is replaced by individual 'port' and 'serverPort' properties for clarity and flexibility.
```diff
module.exports = {
- port: { client: 1234, backend: 5678 }
+ port: 1234,
+ serverPort: 5678
};
```
--------------------------------
### Update App Entry Points (JavaScript)
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
Migrates the entry object in sku.config.js from a nested structure to flattened properties for simplicity. This change affects how code entry points are defined.
```javascript
module.exports = {
- entry: {
- server: './src/server.js',
- client: './src/client.js',
- render: './src/render.js',
- }
+ serverEntry: './src/server.js',
+ clientEntry: './src/client.js',
+ renderEntry: './src/render.js',
};
```
--------------------------------
### Configure Sku Routes, Environments, and Sites
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/static-rendering.md
This TypeScript configuration defines the routes, environments, and sites for the sku build process. It specifies the target directory for output and can include optional settings like initialPath.
```ts
export default {
routes: ['/', '/details'],
environments: ['development', 'production'],
sites: ['australia', 'asia'],
target: 'dist', // Optional, this is the default value
} satisfies SkuConfig;
```
--------------------------------
### Remove Assertions with babel-plugin-unassert
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/extra-features.md
This example demonstrates how sku removes assertions in production builds using babel-plugin-unassert. It shows a React component with an assertion and the transformed code in production, where the assertion and its import are removed.
```tsx
import React from 'react';
import assert from 'assert';
export const Rating = ({ rating }: { rating: number }) => {
assert(rating >= 0 && rating <= 5, 'Rating must be between 0 and 5');
return
;
```
--------------------------------
### Update Storybook Import Path
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v8.0.0.md
Modifies the import path for Storybook components from `sku/storybook` to `sku/@storybook/react`. This change is required due to an update in how Storybook integrations are handled within sku.
```diff
-import { storiesOf } from 'sku/storybook';
+import { storiesOf } from 'sku/@storybook/react';
```
--------------------------------
### Remove tslint.json and update .gitignore
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v9.0.0.md
This snippet outlines the manual steps required after migrating to sku v9, which involves removing the TSLint configuration file and updating the .gitignore file to exclude it.
```shell
rm tslint.json
git add .gitignore
git commit -m "Remove tslint.json entry from .gitignore"
```
--------------------------------
### Configure Sites with Specific Languages
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-language.md
This configuration illustrates how to define multiple sites, each potentially supporting a different subset of languages. It includes a multi-language site and an English-only site, specifying hosts and routes.
```typescript
export default {
languages: ['en', 'fr'],
sites: [
{
name: 'multi-language-site',
host: 'my.site',
routes: ['/$language/'],
},
{
name: 'english-only-site',
host: 'en.my.site',
routes: ['/'],
languages: ['en'],
},
],
} satisfies SkuConfig;
```
--------------------------------
### Custom Locale in VocabProvider
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-language.md
This example demonstrates how to use the `` component to set a custom locale for ICU message formatting, separate from the main language configuration. It uses 'en' as the language but 'en-AU' as the locale.
```jsx
```
--------------------------------
### Configure Source Directories
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Specifies an array of directories containing the application's source code. Defaults to './src'.
```json
{
"srcPaths": ["./src", "./components"]
}
```
--------------------------------
### Configure Husky for Pre-commit Hook
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/extra-features.md
This snippet shows how to configure the package.json to use husky for pre-commit hooks and sets up the pre-commit script to run 'yarn sku pre-commit'. It also includes the command to create the .husky/pre-commit file.
```json
{
"scripts": {
"prepare": "husky"
}
}
```
```bash
echo "yarn sku pre-commit" > .husky/pre-commit
```
--------------------------------
### Configure Routes with Language-Specific URLs
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/multi-language.md
This snippet shows how to configure routes to support specific languages, mapping different URL paths to different language versions. For example, '/hello' for English and '/bonjour' for French.
```typescript
export default {
languages: ['en', 'fr'],
routes: [
{ route: '/hello', languages: ['en'] },
{ route: '/bonjour', languages: ['fr'] },
],
} satisfies SkuConfig;
```
--------------------------------
### Configure Experimental Vite Bundler
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/configuration.md
Sets the bundler to use for building the application. Defaults to 'webpack'. Note: Vite support is experimental and may have limitations.
```json
{
"__UNSAFE_EXPERIMENTAL__bundler": "vite"
}
```
--------------------------------
### Configure tsconfig.json for Storybook
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/storybook.md
Demonstrates how to update `sku.config.ts` to include the `.storybook` directory in the `tsconfig.json`'s `include` field, enabling type checking for Storybook configuration files.
```ts
// sku.config.ts
import type { SkuConfig } from 'sku';
export default {
dangerouslySetTSConfig: (config) => ({
...config,
include: [
'**/*', // Implicit default value if `include` is not set and `files` is not set
'.storybook/**/*', // 👈 Add this line
],
}),
} satisfies SkuConfig;
```
--------------------------------
### Update locales to sites in sku config
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This snippet demonstrates how to migrate from the deprecated 'locales' configuration to the new 'sites' configuration in sku.config.js. It involves renaming the property and updating the associated array values.
```diff
module.exports = {
- locales: ['au', 'nz']
+ sites: ['au', 'nz']
};
```
--------------------------------
### Client Entry Point with Context Hydration
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/static-rendering.md
The client entry point receives context data (site, analyticsEnabled, appLength) returned by provideClientContext. It uses hydrateRoot to attach React event listeners to the server-rendered HTML.
```tsx
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
// The return type of `provideClientContext` in your render entry
type ClientContext = {
site: string;
analyticsEnabled: boolean;
appLength: number;
};
export default ({ site, analyticsEnabled, appLength }: ClientContext) => {
console.log('HTML source length', appLength);
hydrateRoot(
document.getElementById('app')!,
,
);
};
```
--------------------------------
### Update env config to environments in sku config
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v7.0.0.md
This snippet shows the migration from the deprecated 'env' configuration to the new 'environments' option in sku.config.js. It replaces environment-specific variable definitions with a list of supported environments.
```diff
module.exports = {
- env: {
- API_URL: {
- development: 'http://localhost:1234',
- production: 'https://real.api'
- }
- },
+ environments: ['development', 'production']
};
```
--------------------------------
### Configure UMD Library with Entry and Name
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/libraries.md
Configure SKU to build a UMD library by specifying the `libraryEntry` and `libraryName` options. This is an alternative to building a website and is suitable for environments with limited control.
```typescript
export default {
libraryEntry: 'src/library.js',
renderEntry: 'src/render.js',
libraryName: 'MyAwesomeLibrary',
} satisfies SkuConfig;
```
--------------------------------
### Update Render Entry for SkuProvider
Source: https://github.com/seek-oss/sku/blob/master/docs/migration-guides/v8.0.0.md
Modifies the render entry to include SkuProvider, ensuring it's rendered at the top level of the app for SSR. This change is necessary for proper context propagation in server-rendered applications.
```diff
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';
export default {
- renderApp: ({ environment, site, route }) =>
+ renderApp: ({ SkuProvider, environment, site, route }) =>
renderToString(
+
+
),
renderDocument: ({ app, bodyTags, headTags }) => `
My Awesome Project
${headTags}
${app}
${bodyTags}
`
};
```
--------------------------------
### Enable Vite via sku CLI
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/vite.md
When using Vite with sku, the `--experimental-bundler` flag must be passed to sku CLI commands to activate the Vite bundler.
```bash
sku start --experimental-bundler
```
--------------------------------
### Async Server-Side Rendering with Suspense Support
Source: https://github.com/seek-oss/sku/blob/master/docs/docs/static-rendering.md
This example demonstrates using renderToStringAsync within renderApp to support React Suspense during server-side rendering. It allows asynchronous rendering operations to complete before returning the HTML.
```tsx
import React from 'react';
import type { Render } from 'sku';
import App from './App';
export default {
renderApp: async ({
SkuProvider,
environment,
site,
route,
renderToStringAsync,
}) => {
const html = await renderToStringAsync(
,
);
return {
html,
};
},
// ...
} satisfies Render;
```