I believe this can be considered a very silly question, but I'm really stuck on it for some time. I have a very simple Ember.js application (that means I am not using Ember-CLI) and since I am using the Facebook SDK in it, I need a valid domain.
Until now, I've ran my app simply by double clicking the index.html file in the browser.
Then, in order to have a domain for my app, I've tried using nginx inside a Docker container (so that I can add the http://<docker-ip> URL in my Facebook settings). The problem was that nginx (with the default configurations from the official Docker image) was somewhat loading a stale version of both JS files and index.html, even though the container had the latest versions of the files. I've even tried destroying the container, then starting it again and the issue persisted.
I've then tried looking at other approaches, but none satisfied my need of something simple:
node.js server, too much for serving a very basic app;
middleman, too much setup because I don't need to compile stuff (no .hbs, no less etc.);
ember-cli server, doesn't work with a normal Ember.js app;
other small JS servers, had to configure them too much for just serving some static files;
GitHub Pages and S3 do work, but...I don't want to deploy each time when developing.
So, please help me in this silly quest, how can I serve a basic Ember.js app (preferably from a Docker container)?
Related
What I want
User enters https://www.example.com/test, user gets content of NextJS dynamic route /test/index.js.
This works locally.
What happens
User enters https://www.example.com/test, user gets content of root page (index.js).
The browser still shows https://www.example.com/test but it's not the content of /test/index.js. This only appears on production.
Infos
Deploying to Firebase Hosting.
The root of the problem was, that I was exporting the NextJS application and using the output as source files for Firebase. The solution for my specific problem was, to set up Firebase functions to really enable serverside rendering instead of displaying served static files. This also solved my routing problem.
I found tutorials to be very misleading, once everyone uses different folder structures and ways to deploy the application.
If you are facing the same problem, feel free to check out my repository. It is a combination of the Firebase config, package.json and server file working together - taking in account different folder paths for exporting for development and production.
These resources were helpful to me:
Overall Tutorial: https://itnext.io/deploying-next-js-app-to-firebase-functions-eb473791d79e - This is missing some steps regarding function names.
Great for understanding what each file does: https://github.com/jthegedus/firebase-gcp-examples/tree/master/functions-nextjs
Nice for understanding ways of rendering: https://codeburst.io/next-js-on-cloud-functions-for-firebase-with-firebase-hosting-7911465298f2
This made me understand how to use Firebase function names correctly: https://github.com/vercel/next.js/tree/canary/examples/with-firebase-hosting
I have a site that I created using NodeJS and one page html/jquery everything is working as expected on the localhost provided but I'm getting some issue in putting that site online www.xxxx.com, I already got a .com domain but I don't know which configuration should I do on my site and on code , which mean is there steps to follow on the app.js which contain the localhost:3500 ?
This is the structure of my folder developped under VSCODE
and this is my statement app.js of the localhost
//start the server.
app.listen(3500, function () {
console.log('Example app listening on port 3500!');
});
Hope I mentioned everything
Best Regards
To host a website you don't' just need the domain name (.com) but you need the server and hosting as well.
Here you can find details:
Set Up Nginx Server Blocks (Virtual Hosts) on Ubuntu using NGINX (free and open-source)
https://www.digitalocean.com/community/tutorials/how-to-set-up-nginx-server-blocks-virtual-hosts-on-ubuntu-16-04
For Windows:
https://www.rapidvaluesolutions.com/tech_blog/nginx-server-deploying-web-applications/
If you're like me who doesn't want to get into the configuration details of the host server, check out heroku. It's a platform-as-a-service that allows you to host a site really easily and it has a pretty generous free-tier. Not much will have to change code-wise maybe just making the port a variable.
One major issue I had with the platform is that you cannot save files on the filesystem using code, you'll have to use an external file storage like AWS.
The other, slightly minor issue is that you need to be using git to push your code to the heroku servers (Not really an issue tbh since you really should look into git if you aren't using it already)
Hi I am developing a react native android app, and I noticed that video assets only work when the device is connected to the internet. That leads me to the question: where does react native store video assets?
To add clarity: I'm using the require syntax for local file (i.e : source={require('assets/file')}; so the files are all inside the actual directory of the folder)
Are the video assets being hosted on a hosting service? (If so, how does this work, why do they do this, and who is paying for this hosting? I'm definitely not paying for anything right now).
Finally, how can I get my videos to work offline? (I've been searching for days and haven't found any solution for this and no mention of this in the actual docs).
We have a large number of people (10k+) who return to my clients' sites on a regular basis to use a web app we built, improve, and host for them. We have been making fairly frequent backward-incompatible updates to the web app's javascript as our app has improved and evolved. During deployments, the javascript is minified and concatenated into one file, loaded in the browser by require.js, and is uploaded to and hosted on Amazon S3. The file name & url currently doesn't change at all during updates. This last week we deployed a major refactor to the web app and got a few (but not a lot) of reports back that the app stopped working for some people, particularly in firefox. It seemed like a caching issue. We were able to see it initially in a few browsers in testing but it seemed to go away after a refresh or two.
It dawned on me that I really don't know what browser-caching ramifications deploying a new version of a javascript file (with the same name) on S3 will have and whether this situation warrants cache-busting or manipulating S3's headers or anything. Can someone help me get a handle on this? Are there actions I should be taking during deployments to ensure that browsers will immediately get the new version of a javascript file? If not, we run the risk of the javascript and the server API being out of sync and failing, which I think happened here.
Not sure if it matters, but the site's server runs Django and the app and DB are deployed to Heroku. Static files are deployed to S3 using S3Boto via Django's collectstatic command.
This depends a lot on the behaviour of S3 and the headers it sends when requesting files on S3. As you experienced, browsers will show different caching behaviour - so the best option is to use unique filenames.
I would suggest to use cachebuster hashes - in this way you can be sure that the new file always gets requested by browsers and you can use long cache-lifetime headers if you host the files on your own server.
You can for example create a MD5 hash of your minified file and append it (like mycss-322242fadcd23.css). Or you could use the revision number of your source control system. You have to use the cache buster in all links to this file, but you can normally easily do this in your templates where you embed your static resources. Depending on your application, you could probably use this Django plugin that should do this work for you.
I've got a Django app serving a webpage with an HTML5 element. There's a wierd "feature", turning the video element to be non-seekable: video.seekable returns a timeRanges object with length=0, whereas it should be length=1.
This means I can't edit the video. JavaScript can't do anything either.
The thing is, when I upload the problematic webpage, statically - no Django, just plain HTML/JS/CSS - to my website for testing, it works fine - length=1.
However, if I try to serve the same static page on my Django dev server still gives the same problem.
I am using Django's static serving for dev/debug purposes - Do you have any idea what is causing this, or how can I fix it?
Thanks.
Django's dev server probably doesn't support HTTP byte ranges, which is what browsers usually use to implement seeking.
Any production web server, e.g. Apache, lighttpd, or nginx, should support these fine. If you can run your entire Django app one of these servers the problem should go away.
A workaround would be to just serve the video from a server like that: set one of them up to statically serve the video directory on your machine on a different port than Django's dev server, and then in your dev environment either change the <video src= URL to point to the new web server, or write a special view for videos that redirects to the new web server.
I was facing the same problem and found out an easy way around.
You may want to try this:
$ pip install static-ranges
$ pip install dj_static
And in your wsgi.py file:
...
from static_ranges import Ranges
from dj_static import Cling, MediaCling
...
application = Ranges(Cling(MediaCling(get_wsgi_application())))
For more information:
Click Here
I didn't ran into anything like that myself, but I can guess, that Django development server can't stream a video "just like that". You might have to use ETAG middleware to cure this.
Take look at this question: How to stream an HttpResponse with Django
Also note the current builtin dev server is single-threaded so it may freeze easyly.
The concurrent test server : https://github.com/jaylett/django_concurrent_test_server is better for streaming/uploads... (not usable in prod)