example-webpack-integration

@fluid-example/example-webpack-integration

This package contains webpack configuration used by Fluid examples in the FluidFramework repo. These may only be used in the examples, and are not intended for use in production scenarios.

To use this package in an example, you must integrate the following into the webpack config:

1. Call createExampleDriverServiceWebpackPlugin(service), which will return a webpack plugin to include. Service must be one of "t9s", "odsp", or "local". You may want to take this from the environment, such that you can choose the service when starting the dev server.

webpack.config.cjs:

module.exports = (env) => {
	const { service } = env;

	return {
		// ...
		plugins: [
			// ...
			createExampleDriverServiceWebpackPlugin(service),
		],
		// ...
	};
}

package.json:

"start": "npm run start:t9s",
"start:local": "webpack serve --env service=local",
"start:odsp": "webpack serve --env service=odsp",
"start:t9s": "webpack serve --env service=t9s",

2. If using odsp, also call createOdspMiddlewares() which will return an array of additional middlewares to include in setupMiddlewares. Push these on to the middleware array.

webpack.config.cjs:

module.exports = (env) => {
	const { service } = env;

	return {
		// ...
		devServer: {
			// ...
			setupMiddlewares: (middlewares) => {
				if (service === "odsp") {
					middlewares.push(...createOdspMiddlewares());
				}
				return middlewares;
			},
		},
		// ...
	};
}

Then, follow the instructions from the @fluidexample/example-driver package's README to complete the integration.

See GitHub for more details on the Fluid Framework and packages within.

Contribution Guidelines

There are many ways to contribute to Fluid.

• Participate in Q&A in our GitHub Discussions.
• Submit bugs and help us verify fixes as they are checked in.
• Review the source code changes.
• Contribute bug fixes.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsoft’s Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Help

Not finding what you're looking for in this README? Check out fluidframework.com.

Still not finding what you're looking for? Please file an issue.

Thank you!

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.