No need linking them. The build directory is the one to be deployed.
I appreciate your help, thank you. I went ahead and did npm run build followed by serve -s build
This is the html file in the build folder, is this normal? As i open it on the browser its blank
After i finished with the video tutorial i did nothing else to any of the files and ran the build. Maybe there is something else i need to do before doing so?
You shouldn’t tamper with the build. You can user serve -s build to preview it locally or deploy the build. You can follow this to host the build folder https://youtu.be/RiH0ADGPleg
You should be in the directory in your terminal. you need to cd build before doing that
could you provide with the commands i need to input before npm run build?
i have entered cd build
Afraid to make a mistake
No command is needed. npm run build is to bundle up your development code and give you a build folder which is in form of HTML CSS and JS which you can deploy.
1 Like
a lot closer, deployed this time, the issue is now that the website is blank when i open it on moralis browser. If its ok, i will share what i think could be wrong:
-
After npm run build i had also did serve -s build. As i understand this is suppose to provide a preview of the site from the Build folder. To make sure all is well, i had deleted content in index.js which is in the src folder and the website in preview mode went blank, so im guessing after running build it did not take files from the Build folder. I went ahead and restored everything.
-
Took out the build folder and opened it in a new window, this is when the deployment was successful but the website was blank.
-
I have never entered any information in the html file which states:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
Thank you
You shouldn’t delete the index.js folder. You shouldn’t remove any development file or change anything in the public folder if you’re not sure about it’s purpose, else you’ll break your application. So you need to get the index.js back and run yarn start to be sure your app works well in development stage before running yarn build to build it before deploying
1 Like
ok, thank you, i had backed it all up before doing any of this, will run it again tomorrow. Thank you again
Couldnt go to sleep, had to make it work. And Thank you!!! its done, sorry for my nonsense, now after i see the mistakes i was making i realize how dumb i had sounded, I cant thank you enough for your patience
Hi again, everything works perfectly, now having trouble making it responsive, part of it ive managed to adjust but having an issue with the tables, how can i expand them? As you can see in the image attached its very narrow
I have this added on to the pages.css so far to within the src folder and it helped adjust it a bit
@media only screen and (max-width:700px){
nav ul{
width: 100%;
background: linear-gradient();
position: absolute;
top: 75px;
right: 0;
z-index: 2;
}
.widgets{
flex-direction: column-reverse;
margin: 50px 0;
margin-top: 250px;
display: none;
}
.votesDiv{
flex-direction: column-reverse;
align-items: center;
margin-inline: -60%;
margin-right: -56%;
}
as for the tables, cant figure out a way to do so
The project uses the <Table> component from web3uikit which is already responsive by default.
What are you looking to change with it?
on the phone, when i open it, cant see the full table, i can only see the proposal description but not the icons to click on and vote, such as ongoing, passed or rejected. Would like to expand the table so that its margins are closer to the edges than it is now, that should expand the table enough so that full content is visible.
i can share the link to it if you would like, you will see what i mean once you open it over the phone.
Sure. Maybe you can adjust the margin/padding of the container layout in mobile view to help.
That would do it, what would i have to input into the code?
Not sure how to edit the table component in page.css as its not listed in there. The only time it makes changes to the table itself is when i make changes to it on the home.js file. But on there, i cant figure out how to write a line regarding margins
sorry, i guess i was over tired yesterday, sat down with a fresh mind and did it, was able to expand it
, thank you
1 Like