NFT Boilerplate

I have some question about nft boilerplate
are they also support BSC network?
what about the auction feature like in opensea do they support it?
and how to add/activate feature so other user can sell on the marketplace?

how to deploy the boilerplate on cloud like heroku?

how to resolve this issue deploying ethereum boilerplate to cloud server(heroku)

Lenovo-G480:~/app/moralis/react/dex$ git push heroku master
Enumerating objects: 127, done.
Counting objects: 100% (127/127), done.
Delta compression using up to 4 threads
Compressing objects: 100% (112/112), done.
Writing objects: 100% (127/127), 77.52 KiB | 2.98 MiB/s, done.
Total 127 (delta 18), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Determining which buildpack to use for this app
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 16.x...
remote:        Downloading and installing node 16.13.2...
remote:        Using default npm version: 8.1.2
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules (package.json)
remote:        npm ERR! code ERESOLVE
remote:        npm ERR! ERESOLVE unable to resolve dependency tree
remote:        npm ERR! 
remote:        npm ERR! While resolving: [email protected]
remote:        npm ERR! Found: [email protected]
remote:        npm ERR! node_modules/moralis
remote:        npm ERR!   [email protected]"^0.0.135" from the root project
remote:        npm ERR! 
remote:        npm ERR! Could not resolve dependency:
remote:        npm ERR! peer [email protected]">=0.0.176" from [email protected]
remote:        npm ERR! node_modules/react-moralis
remote:        npm ERR!   [email protected]"^0.3.0" from the root project
remote:        npm ERR! 
remote:        npm ERR! Fix the upstream dependency conflict, or retry
remote:        npm ERR! this command with --force, or --legacy-peer-deps
remote:        npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
remote:        npm ERR! 
remote:        npm ERR! See /tmp/npmcache.FGx9L/eresolve-report.txt for a full report.
remote:        
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /tmp/npmcache.FGx9L/_logs/2022-02-01T17_26_45_345Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        Some possible problems:
remote:        
remote:        - Node version not specified in package.json
remote:          https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote:  !
remote:  ! ## Warning - The same version of this code has already been built: 21298c55abc0e8442f406fac735b3a9cfc75e556
remote:  !
remote:  ! We have detected that you have triggered a build from source code with version 21298c55abc0e8442f406fac735b3a9cfc75e556
remote:  ! at least twice. One common cause of this behavior is attempting to deploy code from a different branch.
remote:  !
remote:  ! If you are developing on a branch and deploying via git you must run:
remote:  !
remote:  !     git push heroku <branchname>:main
remote:  !
remote:  ! This article goes into details on the behavior:
remote:  !   https://devcenter.heroku.com/articles/duplicate-build-version
remote: 
remote: Verifying deploy...
remote: 
remote: !	Push rejected to my-dex.
remote: 
To https://git.heroku.com/my-dex.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/my-dex.git'
Lenovo-G480:~/app/moralis/react/dex$ 

If your Ethereum Boilerplate code built successfully on local then heroku might have some configuration issues.

You can check this for more reference -

it run on localhost not build
but i even try on netlify it also got some issues

6:31:09 PM: $ npm run build
6:31:10 PM: > [email protected] build
6:31:10 PM: > react-scripts build
6:31:12 PM: Creating an optimized production build…
6:33:37 PM:
6:33:37 PM: Treating warnings as errors because process.env.CI = true.
6:33:37 PM: Most CI servers set it automatically.
6:33:37 PM:
6:33:37 PM: Failed to compile.
6:33:37 PM:
6:33:37 PM: src/components/Chains/Chains.jsx
6:33:37 PM: Line 6:10: β€˜AvaxLogo’ is defined but never used no-unused-vars
6:33:37 PM: src/components/NFTBalance.jsx
6:33:37 PM: Line 230:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
6:33:37 PM: src/components/NFTMarketTransactions.jsx
6:33:37 PM: Line 1:17: β€˜useState’ is defined but never used no-unused-vars
6:33:37 PM: Line 17:11: β€˜Moralis’ is assigned a value but never used no-unused-vars
6:33:37 PM: Line 78:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
6:33:37 PM: Line 154:7: β€˜columns’ is assigned a value but never used no-unused-vars
6:33:37 PM: src/components/NFTTokenIds.jsx
6:33:37 PM: Line 1:27: β€˜useEffect’ is defined but never used no-unused-vars
6:33:37 PM: Line 7:3: β€˜useNewMoralisObject’ is defined but never used no-unused-vars
6:33:37 PM: Line 307:19: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
6:33:37 PM: Line 326:13: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text
6:33:37 PM: src/hooks/useNFTBalance.js
6:33:37 PM: Line 19:13: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
6:33:37 PM: useEffect(() => {
6:33:37 PM: async function fetchData() {
6:33:37 PM: // You can await here
6:33:37 PM: const response = await MyAPI.getData(someId);
6:33:37 PM: // …
6:33:37 PM: }
6:33:37 PM: fetchData();
6:33:37 PM: }, [someId]); // Or [] if effect doesn’t need props or state
6:33:37 PM: Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching react-hooks/exhaustive-deps
6:33:37 PM: src/hooks/useNFTTokenIds.js
6:33:37 PM: Line 1:10: β€˜ContactsOutlined’ is defined but never used no-unused-vars
6:33:37 PM: Line 25:13: Effect callbacks are synchronous to prevent race conditions. Put the async function inside:
6:33:37 PM: useEffect(() => {
6:33:37 PM: async function fetchData() {
6:33:37 PM: // You can await here
6:33:37 PM: const response = await MyAPI.getData(someId);
6:33:37 PM: // …
6:33:37 PM: }
6:33:37 PM: fetchData();
6:33:37 PM: }, [someId]); // Or [] if effect doesn’t need props or state
6:33:37 PM: Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching react-hooks/exhaustive-deps
6:33:37 PM: Line 65:6: React Hook useEffect has a missing dependency: β€˜resolveLink’. Either include it or remove the dependency array react-hooks/exhaustive-deps
6:33:37 PM: ​
6:33:37 PM: ────────────────────────────────────────────────────────────────
6:33:37 PM: β€œbuild.command” failed
6:33:37 PM: ────────────────────────────────────────────────────────────────
6:33:37 PM: ​
6:33:37 PM: Error message
6:33:37 PM: Command failed with exit code 1: npm run build
6:33:37 PM: ​
6:33:37 PM: Error location
6:33:37 PM: In Build command from Netlify app:
6:33:37 PM: npm run build
6:33:37 PM: ​
6:33:37 PM: Resolved config
6:33:37 PM: build:
6:33:37 PM: command: npm run build
6:33:37 PM: commandOrigin: ui
6:33:37 PM: publish: /opt/build/repo/build
6:33:37 PM: publishOrigin: ui
6:33:37 PM: Caching artifacts
6:33:37 PM: Started saving node modules
6:33:37 PM: Finished saving node modules
6:33:37 PM: Started saving build plugins
6:33:37 PM: Finished saving build plugins
6:33:37 PM: Started saving pip cache
6:33:37 PM: Finished saving pip cache
6:33:37 PM: Started saving emacs cask dependencies
6:33:37 PM: Finished saving emacs cask dependencies
6:33:37 PM: Started saving maven dependencies
6:33:37 PM: Finished saving maven dependencies
6:33:37 PM: Started saving boot dependencies
6:33:37 PM: Finished saving boot dependencies
6:33:37 PM: Started saving rust rustup cache
6:33:37 PM: Finished saving rust rustup cache
6:33:37 PM: Started saving go dependencies
6:33:37 PM: Finished saving go dependencies
6:33:39 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:33:39 PM: Creating deploy upload records
6:33:39 PM: Failing build: Failed to build site
6:33:39 PM: Failed during stage β€˜building site’: Build script returned non-zero exit code: 2
6:33:39 PM: Finished processing build request in 4m36.858077581s

Looks like most of them are prod build issues.

Like this error message says, the warnings are getting treated as errors as this is a prod build. To solve this, either fix all the no-unused-vars warnings or set the CI=false in the env file

what about the rest of the warnings?
do i need to solved all of that?
all of them are showing on localhost terminal

src/components/NFTBalance.jsx
  Line 230:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src/components/NFTMarketTransactions.jsx
  Line 1:17:   'useState' is defined but never used                                                                       no-unused-vars
  Line 17:11:  'Moralis' is assigned a value but never used                                                               no-unused-vars
  Line 78:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 154:7:  'columns' is assigned a value but never used                                                               no-unused-vars

src/components/NFTTokenIds.jsx
  Line 1:27:    'useEffect' is defined but never used                                                                      no-unused-vars
  Line 7:3:     'useNewMoralisObject' is defined but never used                                                            no-unused-vars
  Line 307:19:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
  Line 326:13:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

src/hooks/useNFTBalance.js
  Line 19:13:  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps

src/hooks/useNFTTokenIds.js
  Line 1:10:   'ContactsOutlined' is defined but never used                                                                                                                                                                                                                                                                                                                                                                   no-unused-vars
  Line 25:13:  Effect callbacks are synchronous to prevent race conditions. Put the async function inside:

useEffect(() => {
  async function fetchData() {
    // You can await here
    const response = await MyAPI.getData(someId);
    // ...
  }
  fetchData();
}, [someId]); // Or [] if effect doesn't need props or state

Learn more about data fetching with Hooks: https://reactjs.org/link/hooks-data-fetching  react-hooks/exhaustive-deps
  Line 65:6:   React Hook useEffect has a missing dependency: 'resolveLink'. Either include it or remove the dependency array                        

All of the warnings are treated the same. if process.env.CI =false then all the warnings should be ignored.

Or you could individually remove the variables like useState, Moralis etc where ever you are not using in code to remove the warnings.

It should be straightforward.

btw about deploying ethereum-react-boilerplate
do we also need to deploy the .env file?
because i got this message

react-dom.production.min.js:216 Error: Missing Moralis Application ID or Server URL. Make sure to set your .env file.
    at at (index.js:18:11)
    at si (react-dom.production.min.js:157:137)
    at $s (react-dom.production.min.js:267:460)
    at Nu (react-dom.production.min.js:250:347)
    at ju (react-dom.production.min.js:250:278)
    at Su (react-dom.production.min.js:250:138)
    at yu (react-dom.production.min.js:243:163)
    at pu (react-dom.production.min.js:237:175)
    at ec (react-dom.production.min.js:285:27)
    at react-dom.production.min.js:289:301

Yes, .env files should be configured on the server as well.

Just make sure not to commit your .env files on Github.

1 Like

ah ok thank you
btw do you know how to make the nft for sale?
can we setup it directly to make it for sale or it need to be minted first?

It depends on the type of nft you would like to make. Usually it is minted first and then its sold in the market/

i see so i need to create a minting function before i can list it for sale correct?
btw i am using nft marketplace boilerplate