I'm using CouchApp to push an existing html&javascript application. The application uses jquery and twitter bootstrap and it works perfectly fine from a regular web server / when opened locally.
(The application is basically a ready made app I bought and which I wish to redesign)
After I push the application (which is structured in many folders) I can't open it from couchdb since all the paths are "wrong".
My HTML files are under Page/PageType/Pagename.html so every css for example is accessed via ../../stylesheet/style.css but the URL can't be accessed when calling couchdb.
For example I have this page:
http://127.0.0.1:5984/coreadmin/_design/coreadmin/pages%2fother%2fsign_up.html
Which is displayed in the browser but without style/js/images because the path is:
http://127.0.0.1:5984/coreadmin/stylesheets/application.css (So _design/coreadmin is missing)
Is it possible to upload the project as is and make it work or do I have to go over all the files and fix the paths? (which means it will not work on any other web server...)
Thanks!
The problem was with the URL - by replacing the %2f to / everything everything is now working just fine.
Related
I'm a student working on a project to benefit other students, and I am currently facing a problem with reloading with any other url than the main path.
The webpage is written from scratch (more or less) in React with no backend, but I still hoped that it would work. I am using react-router to change sub-directories.
I have understood that there is a difference between server- and client-url's, and that this issue most likely is related to that. In the app's main directory "webpage.com" everything works fine untill the page is refreshed. If a sub-directory such as "webpage.com/link" is "called" directly, I recieve an error. You can go and try for yourself btw.
Does anyone know of a nice way to fix this? Do I need to implement something like Node.js to fix this? If so, how? I would prefer not to use a hot-fix such as redirecting all sub-directory calls (such as "/link" (an actual page) or "/kejrngo" (jibberish) ) to "/".
I've cloned your project locally and it seems you have a problem with the server. As you said yourself it seems that only open url for your page is http://ifistudenter.no where at the beginning all application is rendered. After you try to refresh the page you are looking for a path that isn't available on the server and that is the reason you get 404.
What seems to be a problem is React Router itself with Apache server:
Please look at this: https://www.malikbrowne.com/blog/using-react-router-with-apache hope it helps
I'm new to web development and i want to ask that why some website have the "/"?
for example https://www.roblox.com/home, notice the "/home" what does that called
I have tried to search on google and i can't find the answer
And some website have like "/login.php", "/index.html" it can also be html?
These are URLs (https://en.wikipedia.org/wiki/URL) and they identify the resource you are trying to reach. I would suggest reading more about how web pages works to get a better general overview of things(e.g.: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
How these resources are actually interpreted depends on the server side implementation:
.php are usually processed by PHP web server
Other static files such as images (*.png , *.jpg, etc), html files, svgs, CSS, js, etc - Are usually located in the local server by the web server (httpd, tomcat, IIS, nodejs, and many many others) and the files as transmitted to the client 'as-is'
When using online tools to build websites, these complexities are usually abstracted away, and in the end URLs will just mean a resource identifier.
[domain]/[section]/[page(.html|.php)|resource(.js|.css)]
domain: the address of the website
section: a way to navigate inside the website itself
page: the user interface that might be rendered server side of client side hold the controls shown to user
resource: files that changes how the content in the pages looks and behaves like
I've found that when launching an Outlook add-in, the URL that you configure in the manifest does not persist the fragment URL and this breaks Single Page Applications (SPAs). It works fine if you are just trying to go to the default route of the SPA e.g. index.html but if you try and go directly to a fragment URL (route) within the app then it doesn't work e.g. index.html#mypage
The index.html#mypage actually gets changed to this:
index.html?et=&_host_Info=Outlook|Web|1…_1480636166782|ocii1|https://outlook.office.com/owa/?realm=XYZ.com#&_serializer_version=1mypage&_xdm_Info=-133b2041_-3d735892_1480636166782|ocii1|https://outlook.office.com/owa/?realm=XYZ.com
Further explanation of the issue can be found here:
https://camerondwyer.wordpress.com/2016/12/02/issues-launching-outlook-add-ins-directly-to-a-spa-route-using-fragment-urls/
Moving to HTML5 style URLs is not currently an option for me so routing within the SPA needs to use the Fragment URL (hashbang). I imagine anyone trying to start an add-in and pass parameters in the URL would be seeing a similar problem.
I'm not sure what I'm missing here, so hopefully someone can help me out. I'm working on a project where we're using Node and in the Run/Edit configurations I've down the following:
Node interpreter: This is the path to the node.exe file
which I checked out from Subversion
Working directory: this is where the "app.js" file is, this is the
path that from the command line you type node app.js and it starts the server
JavaScript file: app.js This is the name of the file that actually creates the server
Now from the main nav bar when I do Run / Run my server the box at the bottom pops up and tells me that Express server is listening on port 3000. Cool.
I can navigate to localhost:3000/myPage.html and I can get to the page just fine.
I added as JSON file to the same directory on my hard drive that myPage.html is in, and I can navigate to that as well by localhost:3000/largeTestData.json.
So the server is up and running and serving file as it should. My problem is that in my Webstorm project, I want to make an AJAX request to that largeTestData file. I do so using jQuery like:
var data = $.get('localhost:3000/largeTestData.json');
data.done(function(data){
console.log('here is your data');
cnosole.log(data);
})
When I do that I get the error (in Chrome)
XMLHttpRequest cannot load localhost:3000/largeTestData.json. Cross origin requests are only supported for HTTP.
and so I look at the URL and I'm seeing:
http://localhost:63342/
Obviously Webstorm has started the server correctly, but when I view an HTML file, it's not using that server (which, of course is why I'm getting the CORS error.
There's some fundamental stuff here which I'm obviously not getting. I need my IDE to deploy to the Web server that it started up, but it's not doing that. Please, someone give me a once over on all the technologies that I'm missing out on here.
WebStrom didn't start your node.js server, but serves static pages by its own internal HTTP server which doesn't know anything about node.js and Express.
The main problem:
When you start your node.js server, it's serving JSON files on port 3000. If you open an HTML-page with the little menu in WebStorm (where you can choose the browser), WebStorm opens the browser with an URL pointing to its own internal webserver running on a different port (e.g. 63342). JavaScript security prohibits loading data from a different host/port Same-origin policy.
It's not WebStorm's fault and you need a solution for this problem in production or you can't go live.
General Solution:
Either you have to ensure that HTML pages and JSON data come from the same host+port, or you can circumnavigate with (a) setting server-side headers ('Access-Control-Allow-Origin: *') as #lena suggested, or (b) using JSONP. Below you find some thoughts using nginx as a reverse proxy so from browser's point of view all requests go to the same host+proxy. It's a very common solution, but as mentioned above, there are other options.
Primitive solution:
Don't use WebStorm to open your browser. Load the page from http://localhost:3000/ and change the URL of the REST resource to $.get('/largeTestData.json'). You'll miss some comfort from your IDE, but you can immediately see that your program is working.
Comfortable solution:
As #lena suggested, there is a way to configure your Express/node.js as a server known to WebStorm. I haven't tried it, but I suppose you can then just press the Run-button and maybe the node.js plugin in WebStorm is as intelligent to know the static-maps in Express and know how to map an HTML-file to a web application URL and open the page in the browser with the URL served by your node.js application. (I'd be surprised once again if this really works magically, but maybe you can configure a mapping from files to URLs manually, I don't know.)
Dirty solution
With some options you can disable security checks, at least in Google Chrome. Then it's possible to load JSON data from a different port than your HTML page. I wouldn't recommend using these options (just my opinion).
Additional Hints
If you do more than just playing around with node.js and some UI fun and you have to serve your application "production-ready", then have a look at nginx to serve your static files and reverse proxy node.js requests from there. I'm using this setup even for development and it works like a charm.
Of course node.js / Express is able to serve static files as well, but IMO placing something like nginx in front of node.js (clustered) bring a bunch of advantages for production sites, e.g. load-balancing, ssl-offloading, avoid JSONP, in many cases performance, easier deployment updates, availability.
To get your code working, just change the URL in $.get() to full URL (including protocol):
var data = $.get('http://localhost:3000/phones.json');
In Webstorm 2016.3 (and probably earlier) there is now another option. Under the Configuration Settings for NodeJS runs, one can manually set the page and port to be loaded via Webstorm's "Browser/Live Edit" settings.
See the screenshot below for settings one can change.
For my local angularJS development, I'm using nodeJS. If I deploy my angularJS project on a tomcat server, it basically works BUT, I'm using different pages and different controllers and every time I click on the other page, it seems that the whole application is restarted again, because the data in the rootscope is lost and it starts program parts which should be started on application startup only.
Can anybody tell me whats going wrong here?
Why is my application not 100 % correct running on tomcat?
I'm using tomcat 7.0.34
I'm not familiar with Tomcat, but we've had the same issue with Apache. As Angular needs to do the routing of your app itself, you have to tell your web server to always deliver your root HTML page, e.g. index.html.
After doing that, your app should work fine.
I assume when you say different page you literally mean a different html page (url).That is the expected behaviour. AngularJS is a Single Page Application (SPA) framework. Like any other SPA it gets reinitialized when you do a full page load\reload or you navigate to another page.
This is due to stateless nature of HTTP. Every page is an independent request, which starts the client side page life cycle.
For using AngularJS correctly as SPA, you need to have a main page. The content of this pages gets alter\appended by child views\partials (again pages). AngularJS also hijacks the browser url chnanges so that this does not cause full page reloads on url change.
Look at some sample applications created using AngularJS to understand how it works.