I'm new to web development and found a website prototype, but when I tried to open it by clicking on the index.html in the files, it's completely blank. The only thing I see is on the tab, and it just says "React App".
How do I make the website components actually show? I know there should be something showing because I can see all of the code and pages, but nothing shows?? Is there some other way to open the website?
React is a library that compiles all your javascript then renders it in index.html file. If you open the file directly you won't see anything. If you want to run your project then:
Open the project folder in vscode.
Press CTRL+J if you have windows.
Type npm install - It will install all project dependencies listed
in package.json at the root of your project.
Then run npm start - This will start development server locally
that you can use to develop your project as you go.
Then go to App.js and make changes and see how the server
automatically refreshes.
to learn more, go to Get started with react - FreeCodeCamp
Related
I'm making a website that I used to edit directly online on Neocities, but due to some problems, I'm looking to switch my editing to local offline. But I can't make my links point correctly to their targets, such as the favicon or my css files because locally, "/" doesn't point to the root.
Is there any program that allows me to set a folder as the root directory so these links can point properly? I'm currently trying Notepad++ but I haven't found a way to do so.
I know I could put the full path as "C:\folder\folder\file.css" for examle, but that would mean I'd have to edit the html of every single of my many pages and then re-edit them when I upload them online, and that's very undesirable. I need a way to preview the html locally without changing any paths, so my favicon link, for example, which currently is href="/favicon.png" can stay unchanged on all the pages. I could remove the "/" but then it wouldn't work for any pages within subfolders, and there's a lot of those in my project.
It's possible that I'm just missing some simple detail but I'm really just very much a beginner to making websites in general.
You can run a local web server to serve the contents of your root directory at a domain like http://localhost:8080. So rather than opening index.html in the browser you visit that URL instead.
There are a bunch of simple web servers you can use - my favourite for purposes like this is the NPM package http-server. It requires Node to be installed.
Install node
Install http-server by executing npm install -g http-server in your Terminal
Run the http-server by navigate to the website root folder and run http-server in your Terminal
http-server will produce an output that will tell you where to access the site.
Starting up http-server, serving ./
http-server version: 14.1.0
Available on:
http://127.0.0.1:8080
http://localhost:8080
Hit CTRL-C to stop the server
I tried deploying Libgdx to html using gradle. I copied the content
html/build/dist
and all I see in the browser is the badlogic image with a red background (what you would see if you just created a project) Why is that?
Using the superdev I can open it in the browser, i see where it says drag this button but can't play it. there's nothing
The code server is ready at http://127.0.0.1:9876/
GET /clean/html
Cleaning disk caches.
Cleaned in 29ms.
GET /superdev.html
[WARN] ignored get request: /superdev.html
[WARN] not handled: /superdev.html
> Building 91% > :html:superDev^C%
turning the dev mod on I see Can't find any GWT Modules on this page.
If I build it normally, I see some warnings about depreciated methods, it builds successfully.
Assets aren't being loaded by html
I've few links that may be help you :
How to start
Super Dev mode in GWT
Also check this thread
https://stackoverflow.com/a/24265470/3445320
EDIT
I've tested on Android Studio with MacOS
Steps :
Run ./gradlew html:clean to clean your html module
On Android Studio Terminal I run ./gradlew html:superDev command
I got The code server is ready at http://127.0.0.1:9876/ on terminal
Then I open Google Chrome, View -> Always Show Bookmarks Bar
I typed http://127.0.0.1:9876/ in adress field -> enter
I got a page having Dev Mode On and Dev Mode Off, two buttons
Drag Dev Mode On to bookmarks bar, that is below my Address bar
Done! now I search http://localhost:8080/html/ , I got my game in browser
Press Dev Mode On button that is in bookmarks bar, I got option for compile
Now I need to deploy my html project
I run ./gradlew html:dist in Android Studio Terminal
I got BUILD SUCCESSFUL in Terminal then I find dist folder inside my html module.
dist folder is inside html module -> build -> dist
I copied dist folder and deployed to my server.
EDIT 2
Make sure badlogic.jpg is in your assets folder of android module
Check entry in assets.txt file and find badlogic.jpg inside html module->war->assets folder. If file or entry not exist.
Somehow program not able to write in assets folder
Check what programs have the file/s open
Check permissions and administrative rights
Delete the cache files, run "gradlew html:clean html:superDev" for every new run of superDev.
Check any anti-virus software, they can flag some of GWT's behaviour as suspicious
I am new to developing but I want to experiment with making changes to this code my friend made for a site we are working on. This is the github link:
https://github.com/415DomSmith/ADA_Map
I've opened html files with chrome before to view them but that doesnt seem to work here. Opening views/landing.ejs with chrome doesnt render the whole site.
Here is a screenshot of the main folder contents:
main folder contents screenshot
So my question is what program can I use to render and make edits to the code? Can brackets do it? I've tried with no luck.
Thanks!
cd ${the root path of the project}
npm install
node app.js
visit localhost:3000 in the browser.
According to your description, I think you are new of nodejs and express.
If you want to understand it thoroughly, you must study below.
npm package
nodejs
express
For creating my college webpage using polymer, I have downloaded polymer starter kit 1.0.2. I have customized those html files to my desired text and it runs well when I do the below.
gulp serve
opening well is chrome through
http://localhost:3000/
The problem is, it doesn't show up when I drop files into my college server. The reason for creating a website so that it can be viewed under my name like www.college.edu/~rajesh. We have public_html folder wherein if we put html/css/js files and that is it will accessible public from above URL.
when I copied the contents of app folder along with bower_component folder
the site doesn't come up whereas it work fine locally (using localhost). Only the title gets loaded however there is NO html body visible.
I am totally new to polymer. could this be done? if yes am I missing something.
You have to run gulp serve:dist which will build/vulcanize your site. Then you need to copy app/dist folder
Just a further clarification not sure if you ran this command, according to the readme file when you want to deploy your site you need to run
gulp
which will Build and optimize the current project, ready for deployment. This includes linting as well as vulcanization, image, script, stylesheet and HTML optimization and minification.
All the files needed will then be located in the 'dist' folder.
Build and Vulcanize polymer starter kit github README.md
I have the windows application installed, Live Reload extension for chrome and i'm using Sublime Text with Live Refresh and Live Reload plugins. For some reason any HTML doc i edit on sublime text is not auto updating on chrome. The extension is stuck on "Live Reload is connecting" when i enable it. What exactly am i missing, do i need to setup a local web server or something like that?
I think your issue may be that you did not add the folder that contains your HTML document to the LiveReload windows application so that it can monitor for changes to the file.
If you open up the LiveReload app, it should have a list of site folders. Try adding your test project's folder to the list.
If you load from local file it does work you must runt the local file through a web server e.g python -m http.server in the folder your .html exists otherwise the option match to local file never appears and then you can have the save and reload functionality.
I mention it because I hadn't found the problem through reading the post