Merge pull request #22 from hasanayan/fix-readme

chore: fix readme

README.md

@@ -5,6 +5,10 @@ Convert your CRA project into a single-spa application without ejecting and losi
 ![](https://img.shields.io/npm/v/craco-plugin-single-spa-application.svg?style=flat)
 ![](https://img.shields.io/npm/dt/craco-plugin-single-spa-application.svg?style=flat)
 
+## Dependencies
+
+This plugins depends on CRACO so make sure to follow the installation instructions before installing and setting up this plugin. https://github.com/gsoft-inc/craco/blob/master/packages/craco/README.md#installation
+
 ## Install
 
 ```
@@ -13,40 +17,31 @@ npm install craco-plugin-single-spa-application --save-dev
 
 ## Usage
 
-1. Add the plugin into your craco.config.js;
+1. Open the `craco.config.js` file and apply the following changes:
 
 ```typescript
 singleSpaApplicationPlugin = require('craco-plugin-single-spa-application');
 
-module.exports = {
-    plugins: [{
-        plugin: singleSpaApplicationPlugin,
-        options: {
-        orgName: "my-org",
-        projectName: "my-app",
-        entry: "src/single-spa-index.tsx", //defaults to src/index.js,
-        orgPackagesAsExternal: false, // defaults to false. marks packages that has @my-org prefix as external so they are not included in the bundle
-        reactPackagesAsExternal: true, // defaults to true. marks react and react-dom as external so they are not included in the bundle
-        minimize: false, // defaults to false, sets optimization.minimize value
-        outputFilename: single-spa-build.js // defaults to the values set for the "orgName" and "projectName" properties, in this case "my-org-my-app.js"
-      },
-    }]
+const singleSpaApplicationPlugin = {
+  plugin: singleSpaApplicationPlugin,
+  options: {
+    orgName: "my-org",
+    projectName: "my-app",
+    entry: "src/single-spa-index.tsx", //defaults to src/index.js,
+    orgPackagesAsExternal: false, // defaults to false. marks packages that has @my-org prefix as external so they are not included in the bundle
+    reactPackagesAsExternal: true, // defaults to true. marks react and react-dom as external so they are not included in the bundle
+    minimize: false, // defaults to false, sets optimization.minimize value
+    outputFilename: "single-spa-build.js" // defaults to the values set for the "orgName" and "projectName" properties, in this case "my-org-my-app.js"
+  },
 }
-```
 
-2. Update the scripts section of your package.json as follows:
-
-```json
-  ...
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "craco:build": "craco build",
-    "craco:start": "craco start",
-    ...
+// Keep any other configuration you are exporting from CRACO and add the plugin to the plugins array
+module.exports = {
+    plugins: [singleSpaApplicationPlugin]
+}
 ```
 
-3. Run `npm run craco:build` to generate your microfrontend app bundle. The output will be located under build folder and named as my-org-my-app.js
+2. Run `npm run craco:build` to generate your microfrontend app bundle. The output will be located under build folder and named as `my-org-my-app.js` or using the name defined in `outputFilename` option. 
 
 ## License