-
Go to
src/Images.tsx
to change the QR image-
Create or edit your qr code as you like then upload the image in your cloud storage.
-
If you want to hide your URLs to your QR codes in your source code, follow the steps below.
Note that these links will be revealed once the webapp is deployed (can be seen in inspect element). Saving the links in an
.env
file is simply so that the URLs are not directly exposed and are excluded when people fork your repository.- Create a
.env
file in your root directory (wherepackage.json
is located). - Make the images publicly available then copy and paste the URLs in the
.env
file similar to the format below:REACT_APP_LINK0=https://yourcloudstorage.com/image0 REACT_APP_LINK1=https://yourcloudstorage.com/image1
Note that the variable name should start with "REACT_APP_"
- Create a
-
If you won't hide your URLs in your source code, follow the step below.
- Make the images publicly available then copy and paste the URLs in the
Image.tsx
file similar to the format below:{ id: 0, url: 'https://yourcloudstorage.com/image0', },
- Make the images publicly available then copy and paste the URLs in the
-
-
Go to
public/index.html
and change the text enclosed in the<title>
tag to your preferred name.
- Edit
Images.tsx
by adding or removing the similar code snippet as shown in the example below.{ id: 2, url: process.env.REACT_APP_LINK2, },
- Open your terminal and locate the directory of the project then run
npm i
to install the dependencies. - Run
npm run start
to deploy locally.
- Vercel: View documentation
- Netlify
- Heroku
- AWS Amplify
- AWS S3
Don't forget to add your environment variables in your chosen host if you have chosen to hide your URLs in your code.