diff --git a/content/tutorials/react-get-use-data-set.md b/content/tutorials/react-get-use-data-set.md
index 1a009e59..46194e9a 100644
--- a/content/tutorials/react-get-use-data-set.md
+++ b/content/tutorials/react-get-use-data-set.md
@@ -14,6 +14,7 @@ Open `src/App.js` in your marketplace app.
 In the previous tutorial we added asset publishing. We can now search for published assets for consumption. Just after the `submitAsset()` function we can add a new function that will handle search:
 
 ```js
+// src/App.js
 async retrieveAssets() {
   this.dbAssets = await this.ocean.assets.search("10 Monkey Species Small")
   console.log(this.dbAssets)
@@ -23,6 +24,7 @@ async retrieveAssets() {
 The last thing we need is a button to start our search inside the render function just after `<button onClick={() => this.submitAsset()}>Register asset</button>`:
 
 ```jsx
+// src/App.js
 <button onClick={() => this.retrieveAssets()}>Retrieve assets</button>
 ```
 
@@ -31,6 +33,7 @@ The last thing we need is a button to start our search inside the render functio
 The retrieved assets can now be consumed so in this tutorial we consume the first one. The following code goes after the `async retrieveAssets()` function.
 
 ```js
+// src/App.js
 async consumeAsset() {
   // get all accounts
   const accounts = await this.ocean.accounts.list()
@@ -58,6 +61,7 @@ async consumeAsset() {
 We still need a button to start consumption. In the render function, just after the `<button onClick={()=>this.retrieveAssets()}>Retrieve assets</button>` line, add:
 
 ```jsx
+// src/App.js
 <button onClick={() => this.consumeAsset()}>Consume asset</button>
 ```
 
@@ -76,83 +80,16 @@ If you have no errors in your `console.log` and can see your asset files listed,
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
 ```jsx
+// src/App.js
 import React, { Component } from 'react'
 import './App.css'
 import { Ocean } from '@oceanprotocol/squid'
 import * as Web3 from 'web3'
+import asset from './asset'
 
 const web3 = new Web3(window.web3.currentProvider)
 window.ethereum.enable()
 
-const asset = {
-  base: {
-    name: '10 Monkey Species Small',
-    dateCreated: '2012-02-01T10:55:11Z',
-    author: 'Mario',
-    license: 'CC0: Public Domain',
-    contentType: 'jpg/txt',
-    price: 10,
-    files: [
-      {
-        index: 0,
-        contentType: 'application/zip',
-        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-        checksumType: 'MD5',
-        contentLength: 12057507,
-        compression: 'zip',
-        encoding: 'UTF-8',
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-      },
-      {
-        index: 1,
-        contentType: 'text/txt',
-        checksum: '354d19c0733c47ef3a6cce5b633116b0',
-        checksumType: 'MD5',
-        contentLength: 928,
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt',
-        resourceId: 'test'
-      },
-      {
-        index: 2
-      }
-    ],
-    checksum: '',
-    categories: ['image'],
-    tags: ['image data', 'classification', 'animals'],
-    type: 'dataset',
-    description: 'EXAMPLE ONLY ',
-    copyrightHolder: 'Unknown',
-    workExample: 'image path, id, label',
-    links: [
-      {
-        name: 'example model',
-        url:
-          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-      },
-      {
-        name: 'example code',
-        type: 'example code',
-        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
-        name: 'n5151.jpg',
-        type: 'discovery'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
-        name: 'sample.zip',
-        type: 'sample'
-      }
-    ],
-    inLanguage: 'en'
-  }
-}
-
 class App extends Component {
   async componentDidMount() {
     this.ocean = await new Ocean.getInstance({
diff --git a/content/tutorials/react-publish-data-set.md b/content/tutorials/react-publish-data-set.md
index fa085ada..38842f6d 100644
--- a/content/tutorials/react-publish-data-set.md
+++ b/content/tutorials/react-publish-data-set.md
@@ -13,118 +13,10 @@ Open `src/App.js` in your marketplace app from the [React App Setup](/tutorials/
 
 First, let's add the [asset](/concepts/terminology/#asset-or-data-asset) that we want to publish.
 
-To do that, we need to add the following code after `window.ethereum.enable()` line, defining our asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure:
+To do that, we need to define the asset based on the [OEP-08](https://github.com/oceanprotocol/OEPs/tree/master/8) metadata structure. Let's create a new file `src/asset.js` and fill it with:
 
 ```js
-const asset = {
-  base: {
-    name: '10 Monkey Species Small',
-    dateCreated: '2012-02-01T10:55:11Z',
-    author: 'Mario',
-    license: 'CC0: Public Domain',
-    contentType: 'jpg/txt',
-    price: 10,
-    files: [
-      {
-        index: 0,
-        contentType: 'application/zip',
-        checksum: '2bf9d229d110d1976cdf85e9f3256c7f',
-        checksumType: 'MD5',
-        contentLength: 12057507,
-        compression: 'zip',
-        encoding: 'UTF-8',
-        url: 'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/training.zip'
-      },
-      {
-        index: 1,
-        contentType: 'text/txt',
-        checksum: '354d19c0733c47ef3a6cce5b633116b0',
-        checksumType: 'MD5',
-        contentLength: 928,
-        url: 'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/assets/monkey_labels.txt'
-        resourceId: 'test'
-      },
-      {
-        index: 2
-      },
-    ],
-    checksum: '',
-    categories: ['image'],
-    tags: ['image data', 'classification', 'animals'],
-    type: 'dataset',
-    description: 'EXAMPLE ONLY ',
-    copyrightHolder: 'Unknown',
-    workExample: 'image path, id, label',
-    links: [
-      {
-        name: 'example model',
-        url:
-          'https://drive.google.com/open?id=1uuz50RGiAW8YxRcWeQVgQglZpyAebgSM'
-      },
-      {
-        name: 'example code',
-        type: 'example code',
-        url: 'https://github.com/slothkong/CNN_classification_10_monkey_species'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/discovery/n5151.jpg',
-        name: 'n5151.jpg',
-        type: 'discovery'
-      },
-      {
-        url:
-          'https://s3.amazonaws.com/datacommons-seeding-us-east/10_Monkey_Species_Small/links/sample/sample.zip',
-        name: 'sample.zip',
-        type: 'sample'
-      }
-    ],
-    inLanguage: 'en'
-  }
-}
-```
-
-## Handle Asset Publishing
-
-Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
-
-```js
-async submitAsset() {
-    const accounts = await this.ocean.accounts.list()
-    const ddo = await this.ocean.assets.create(asset, accounts[0])
-    console.log('Asset successfully submitted.')
-    console.log(ddo)
-    alert(
-      'Asset successfully submitted. Look into your console to see the response DDO object.'
-    )
-  }
-```
-
-The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
-
-```jsx
-<button onClick={() => this.submitAsset()}>Register asset</button>
-```
-
-Tip: Before clicking the `Register asset` button, it might help to reload the page.
-
-When you click on the `Register asset` button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
-
-If you have no errors in your `console.log`, then you have successfully registered an asset.
-
-## Final Result
-
-Here is the full source of `src/App.js` that you should have if you followed this tutorial:
-
-```jsx
-import React, { Component } from 'react'
-import './App.css'
-import { Ocean } from '@oceanprotocol/squid'
-import * as Web3 from 'web3'
-
-const web3 = new Web3(window.web3.currentProvider)
-window.ethereum.enable()
-
+// src/asset.js
 const asset = {
   base: {
     name: '10 Monkey Species Small',
@@ -194,6 +86,54 @@ const asset = {
   }
 }
 
+export default asset
+```
+
+## Handle Asset Publishing
+
+Now that we have an asset to submit, we need a function to handle it. Just before `render() {` let's add this function:
+
+```js
+// src/App.js
+async submitAsset() {
+    const accounts = await this.ocean.accounts.list()
+    const ddo = await this.ocean.assets.create(asset, accounts[0])
+    console.log('Asset successfully submitted.')
+    console.log(ddo)
+    alert(
+      'Asset successfully submitted. Look into your console to see the response DDO object.'
+    )
+  }
+```
+
+The last thing we need is a button to start our registration inside the render function just after `<h1>Marketplace app</h1>`:
+
+```jsx
+// src/App.js
+<button onClick={() => this.submitAsset()}>Register asset</button>
+```
+
+Tip: Before clicking the `Register asset` button, it might help to reload the page.
+
+When you click on the `Register asset` button, you should get four separate dialog boxes from MetaMask, in a series, i.e. the second one only appears after you accept/approve the first one, and so on.
+
+If you have no errors in your `console.log`, then you have successfully registered an asset.
+
+## Final Result
+
+Here is the full source of `src/App.js` that you should have if you followed this tutorial:
+
+```jsx
+// src/App.js
+import React, { Component } from 'react'
+import './App.css'
+import { Ocean } from '@oceanprotocol/squid'
+import * as Web3 from 'web3'
+import asset from './asset'
+
+const web3 = new Web3(window.web3.currentProvider)
+window.ethereum.enable()
+
 class App extends Component {
   async componentDidMount() {
     this.ocean = await new Ocean.getInstance({
diff --git a/content/tutorials/react-setup.md b/content/tutorials/react-setup.md
index 3c390777..75d9ce64 100644
--- a/content/tutorials/react-setup.md
+++ b/content/tutorials/react-setup.md
@@ -47,6 +47,7 @@ At this point you can already run `npm start` which starts the app in your brows
 Let's make it ours, open `src/App.js` and replace the whole source with:
 
 ```jsx
+// src/App.js
 import React, { Component } from 'react'
 import './App.css'
 
@@ -66,6 +67,7 @@ export default App
 Below the `import './App.css'` line, let's import the packages we installed, set up web3 and unlock MetaMask accounts (if locked):
 
 ```js
+// src/App.js
 import { Ocean } from '@oceanprotocol/squid'
 import * as Web3 from 'web3'
 
@@ -87,6 +89,7 @@ Now that we are successfully connected with Web3, we can set up our Ocean instan
 At the beginning of your component (i.e. right after the `class App extends Component {` line), create a new Ocean instance with all configuration within the `componentDidMount` lifecycle method. All Ocean Protocol operations can be executed from this Ocean instance.
 
 ```js
+// src/App.js
 async componentDidMount() {
   this.ocean = await new Ocean.getInstance({
     web3Provider: web3,
@@ -110,6 +113,7 @@ That's it, if you have no errors in your `console.log` then you have successfull
 Here is the full source of `src/App.js` that you should have if you followed this tutorial:
 
 ```jsx
+// src/App.js
 import React, { Component } from 'react'
 import './App.css'
 import { Ocean } from '@oceanprotocol/squid'