Hidding Servers Filesystem in Gatsby / ReactJS? - html

I am about to learn ReactJS.
I want to hide the filesystem structure of my server and only show the project root.
If i go to inspect tools in google-chrome i can see where my project is located on my C: Drive.
Wasnt able to find something about it and Ive got no Idea.
Hopefully, someone can help me.

This is because you are using your computer as a server to serve your site so the inspect tools are able to recognize the origin of the code, assets, and images.
Locally, even using gatsby develop or gatsby build (and gatsby serve) you will always be able to see the root of your project, it happens with all web development files, not only in Gatsby.
In a real scenario, where it's a server (with a domain attached, not your PC) that serves the files you will never see the origin because your site will be placed in the /public or /www of your server. To prepare your project to be deployed, you should run gatsby build command, which will create a /public folder in the root of your project with your code compiled, that folder is the one that needs to be deployed.

This is normal in development environment, for deploy your project try one of these approach in root of you project:
npm build
or
yarn build
This command build an optimized version of your project in build folder, after you can upload content of this folder to your www/plulic folder of your server,

Related

How do I set the root directory for links while editing offline?

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

How to deploy Libgdx game into the real web server

I built the Libgdx game with Gradle and success in deployment on localhost. So I move the code into the real server. However, when I open the browser of my game..it seems like the browser reads url (localhost). Nothing appear!! I am wondering if I have to set up more info for javascript to run the game on the real server or in config files somewhere ?
How you build web-server version of your project? You should use this command:
$ ./gradlew html:dist
Results files will be inside folder: html/build/dist
You should copy all files to webroot folder of your vhost.
Structure should be something like this:
assets
html
index.html
soundmanager2-jsmin.js
soundmanager2-nodebug-jsmin.js * - i also download from soundmanager website nodebug version of soundmanager
soundmanager2-setup.js
styles.css
I was programming gwt project few times. For example: http://ciufcia.pl/boomki-nimm2.
If this does not help, please give some logs from webconsole.

Deploying website created using Polymer starter kit?

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

Subdirectories in openshift project cannot be found

I built a site using a php openshift project and accessing the root directory via http works fine. However, all the root directories give me a 404 not found, like this one: http://test.toppagedesign.com/sites/
I checked with ssh, and /app-root/repo/sites and app-deployments/current/repo/sites/ both exist.
EDIT
Added a directory called php and now I have 503 errors for everything...
EDIT 2
I deleted the php directory, now the 503 errors are gone. However, I do still get 404 errors for the subdirectory.
Here is my directory tree: http://pastebin.com/hzPCsCua
And I do use git to deploy my project.
php is one of the alternate document roots that you can use, please see the March Release blog post here about this (https://www.openshift.com/blogs/openshift-online-march-2014-release-blog)
As for the sub-directories not working, can you ssh into your server and use the "tree" command to post the directory/file structure of your project? Also are you using Git to deploy your project or editing files directly on the server?
You need to have an index.php or index.html file in any directory that you want to work like app-domain.rhcloud.com/sites , if you just have sub-directories, how would it know what to show? Also, indexing (showing a folders contents) is not enabled for security reasons, and I believe there is no way to enable it.
This sounds like it could be a problem with how you are serving your static content.
I recently created a new sample app for OpenShift that includes:
a basic static folder
an .htaccess file (for serving assets in production)
support for using php's local server to handle the static content (in your dev environments)
Composer and Silex - a great starting point for most new PHP apps
You can serve the project locally if you have PHP-5.4 (or better), available in your dev environment:
php -S localhost:8080 -t static app.php
For a more advanced project that is built on the same foundation, take a look at this PHP+MongoDB mapping example. I wrote up a blog post with some notes on my process for composing that app as well.
Hope these examples help!

Aptana Studio 3 preview problems with absolute path

I have this structure for my project:
Root Directory
|-css folder
|-style.css
|
|-it folder
|-index.html
If I try to include css file with:
<link href="/css/style.css" rel="stylesheet" type="text/css"/>
from index.html, aptana preview and also internal server can not find style.css.
Why is this?
In my remote server it works perfectly and I do not want to use a relative path.
In terms of the "why", the problem you are having is related to how your development server is setup versus your production server.
Assuming a standard setup, your production server will receive requests for a domain (i.e., http://mysite.com) that is, for lack of a better word, mapped to a folder on your server (i.e, a request to http://mysite.com will be mapped to a folder, /var/www/mysite, on your server).
So, when you link to a style sheet with /css/style.css, your (production) sever immediately goes to the /var/www/mysite folder and starts looking for the css folder, file and so on. No problems with that, as you point out.
Your development machine, however, is serving up pages locally and has a different directory structure for mapping to files and folders.
When I open an HTML page in my Aptana project and hit the preview button, Studio loads http://127.0.0.1:8020/mysite/public/404.html (note how the first folder after the IP and port is mysite). To load the absolutely pathed CSS file, the local server is actually looking for http://127.0.0.1:8020/css/styles.css but it needs to get to http://127.0.0.1:8020/mysite/css/styles.css.
The initial "/" in your link (/css/styles.css) tells the server to go to the root directory of the server and start looking for the folder and files from that point ... but there is no css folder in the local server's root directory. It lives in /mysite/css/styles.css and that's why fskreuz suggests relative paths and using "../css/styles.css" instead.
Personally, I prefer absolute links (but that's just a personal preference and not in any way a challenge to or comment upon fskreuz's response). However, my local development setup is conducive to using them because I setup virtual hosts for the sites I work on. Using Apache, I setup a virtual host for each of my projects. With this, I can load something like http://dev.mysite.com in any browser on my computer and test my site/app in a way that makes it mirror my production setup.