OpenShift unable to find css and js files - javascript

When running my openshift app none of the CSS or javescript files are loading.
I have specified the directory in the server.js:
app.use(express.static(__dirname));
In the index.html I have specified the location of the folders:
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script src = "controllers/controller.js"></script>
The structure of the folder looks like:
mytest
├── README.md
├── controllers
│   └── controller.js
├── deplist.txt
├── index.html
├── node_modules
├── package.json
├── server.js
└── style.css
When I open the website and open the developer console in chrome I get the following errors:
http://mytest-jamestreasure.rhcloud.com/controller.js 404 Not Found
http://mytest-jamestreasure.rhcloud.com/controllers/controller.js 404 Not Found
I'm not aware of anything else that needs to be added.
Link to the my openshift: http://mytest-jamestreasure.rhcloud.com/

Your construct for defining static content access seems to be correct. Make sure that you are using it with your app context though, e.g.:
myApp.app.use(express.static(__dirname));
Such a problem could be revealed either locally when trying to run the server.js or using rhc tail mytest to check the OpenShift remote logs.
I would also recommend using a dedicated directory for static content that is meant to be used publicly, rather than exposing everything:
app.use(express.static(__dirname + '/public'));

The issue was because of the following warning, which I was ignoring:
Warning: express.createServer() is deprecated, express
applications no longer inherit from http.Server,
please use:
var express = require("express");
var app = express();
It meant I had to change:
self.app = express.createServer();
to:
self.app = app;
This was in the self.initialise = function()

Related

Can I use php-cgi to serve an HTML which refers to CSS/JS files from the parent directory?

tl;dr
My understanding is that php -S localhost:1234 -t some-dir serves the page some-dir/index.html at localhost:1234, expecting that CSS and JavaScript (and other files) that the page requires are in some-dir/., not in some-dir/../..
How can I start a server that serves some-dir/index.html and looks for the required files in some-dir/../..
Long version
I have a directory structure like this:
index.html
css
├── some.css
├── style.css
└── sheets.css
docs
├── index.html
└── a lot of other stuff.html
js
├── some.js
├── javascript.js
└── files.js
And obviously anything referred to from within the main index.html is referred via a path containing no ../.
On the other hand, docs/index.html is automatically generated by KSS, a library for documenting CSS modules, and given it position in the tree, when it refers to the very same files as the main index.html, it does so by prepending ../ to the paths. For instance, if the main index.html has
<script type="text/javascript" src="js/some-script.js"></script>
docs/index.html has
<script src="../js/some-script.js"></script>
Now, for the purpose of debugging JavaScript code launched upon user interactions with docs/index.html, I start the server like this
php -S localhost:1234 -t docs
because docs is the directory where the index.html is, that I want the server to present; but the problem is that the server looks for the files (referenced by the HTML) in the wrong directory, kind of like it strips off ../, so I get errors like the following:
GET http://localhost:1234/css/main.css net::ERR_ABORTED 404 (Not Found) section-containers.html:12
GET http://localhost:1234/js/swipeable-container.js net::ERR_ABORTED 404 (Not Found) section-containers.html:412
How can I serve an index.html which uses scripts and stylesheets (are they all together called assets?) from a parent directory?

reusing backend modules in frontend

I have a simple express application, with a server module and some client code.
My application source files were originally organized in two directories (simplified):
│ package.json
│ readme.md
│
├───client
│ client.js
│ index.html
│
└───server
server.js
colors.js
The color module (server/colors.js) is, for the purpouse of this SO question, a commonjs module that exports a single value
const color = "white";
module.exports = { color };
server/server.js contains an express application that, among other things, uses the color defined in the module, and uses the express.static middleware to serve the files in the client directory.
const color = require('./colors').color;
...
app.use(express.static(path.join(__dirname , '..', 'client')));
The client code is inserted in the <head> of index.html as a module
<script defer src="client.js" type="module"></script>
So far so good, the server starts, serves from client directory all the client files mounted at its root route.
Now, I want to reuse the server colors module also from my client code.
So I create a new directory shared and I move the colors.js source file there.
│ package.json
│ readme.md
│
├───client
│ client.js
│ index.html
│
├───server
│ server.js
│
└───shared
colors.js
Then, I change my server.js to import from the new location
const color = require('../shared/colors').color;
and, to reuse it in the client, I add a virtual path in the server, mounting a new express.static() path
app.use('/shared',express.static(path.join(__dirname , '..', 'shared')));
everything is good so far, the server requires the module, and serves both client and shared directories.
Now, to use the module in the client, I import colors in client.js
import * as colors from './shared/colors.js';
but the browser throws an error ReferenceError: module is not defined
How can I solve this error? or, what is the correct way, and best practice, if any, to reuse backend code from the frontend?

How do next.js applications optimize for mobile screens?

I just figured out that since I built my app with Next.js, I can't use CRA's folder structure framework to build or diagnose my application.
Unfortunately, I'm completely at a loss at the moment with respect to how Next.js applications are supposed to properly scale a website for mobile devices. I've always been under the impression that it was the job of index.html to do that (which I've written, but my app can't seem to bother to find it or use it). I've looked at the default folder structure for a Next.js app:
├── README.md
├── components
│ ├── head.js
│ └── nav.js
├── next.config.js
├── node_modules
│ ├── [...]
├── package.json
├── pages
│ └── index.js
├── static
│ └── favicon.ico
└── yarn.lock
source
but there doesn't seem to be a place for index.html.
My question is simply, how do Next.js apps optimize for mobile screens? Are they even supposed to have an index.html, and if so where? And how do favicons work, because I've created the static folder and put the favicon inside, but I'm pretty sure to have the favicon do anything, it has to be referenced by a file (conventionally index.html).
repo
Next has this Document component which you can customize to your own likings.
As their official docs say:
Is used to change the initial server side rendered document markup
You can use it to customize your head tag content as you would do anyway in your index.html.
Don't forget to add <meta name="viewport"content="width=device-width, initial-scale=1.0" /> in head tag if you want your app to use media queries.
Next project is not supposed to have a particular index.html file. Instead, the initial page is supposed to be a component located specifically in pages/index.js.

Copy NPM module/library to distribution folder using Gulp

Most web applications these days include various prebuilt libraries e.g. Backbone.js.
I want, when I compile my web application with Gulp, to output a single compressed JavaScript file of the library/module I installed using NPM e.g. backbone-min.js.
For example, when you install Backbone.js from NPM the following is installed into the node_modules folder:
.
├── backbone
│   ├── LICENSE
│   ├── README.md
│   ├── backbone-min.js
│   ├── backbone-min.map
│   ├── backbone.js
│   └── package.json
I want to be able to run gulp compile and get the following result in my web application distribution folder:
.
├── index.html
├── scripts
│   ├── backbone-min.js // this is the file I want to copy or generate
│   ├── main.min.js
The way I see it Gulp either needs to either:
compile and minify the library/module and write it to a file called backbone-min.js to the scripts folder, or
copy the backbone-min.js in the backbone module folder to the scripts folder.
What is the best way of doing this?
Short Answer
gulp-useref concatenates all the file references in your main .html file encapsulated by <!--build:js /lib.js--> for javascript files and <!--build:css /lib.css--> followed by <!--endbuild-->
The result will be:
index.html
├── scripts
│ ├── backbone-min.js // this is the file I want to copy or generate
│ ├── main.min.js
as you and every good developer wants it to be.
Long Answer
My recommendation would be to use Bower as your app dependencies manager and npm as your development dependencies manager.
Use gulp-wiredep to automatically inject dependencies as you install/uninstall them and that way you don't have to maintain library css and js files in your index.html.
Uset gulp-inject to automatically inject your own css and js files as your add/remove them. This will result in never ever having to maintain application dependencies manually.
With wiredep, inject and useref you never have to touch your dependencies again.
This is what my index header and end of body look like:
<!---------------------------- Bower Managed Styles ----------------------------->
<!--build:css css/lib.css-->
<!--bower:css-->
<link rel="stylesheet" href="../bower_components/..."
<!--endbower -->
<!--endbuild -->
<!---------------------------- Application Styles ------------------------------->
<!--build:css css/app.css-->
<!--inject:css-->
<link rel="stylesheet" href="content/css/bootstrap ..."
<!--endinject-->
<!--endbuild-->
<!--------------------------- Bower Managed Javascript ------------------------->
<!--build:js js/lib.js-->
<!--bower:js -->
<script src="../bower_components/ ..."> </script>
<!--endbower -->
<!--endbuild -->
<!-------------------------- Application Javascript --------------------------->
<!--build:js js/app.js-->
<!--inject:js-->
<script src="app/ ..."> </script>
<!--endinject-->
<!--inject:templates:js-->
<!--endinject-->
<!--endbuild-->
The comments are tags used by the tools I just mention in order for them to know where to insert the dependencies of interest.
My application entry is a single template reference. Needless to say I never visit index.html. I never have a reference to a file that does not exist. I never have a file that does not have a reference.

express.js (static server) isn't loading my javascript

My I'm using express.js as a static server and the code is looking like this:
var express = require('express'),
app = express();
app
.use(express.static('./public'))
.get('*', function (req, res) {
res.sendfile('public/main.html');
})
.listen(3000);
My file structure:
.
├── bower_components
│   ├── angular
│   ├── bootstrap
│   └── jquery
├── node_modules
│   └── express
├── public
│   ├── main.html
│   ├── src
│   └── views
└── server.js
My HTML is looking like this:
<!DOCTYPE html>
<html ng-app="ContactsApp">
<head lang="en">
<meta charset="UTF-8">
<title> Contacts </title>
<base href="/" />
<link rel="stylesheet" href="src/bootstrap.min.css"/>
</head>
<body>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="src/app.js"></script>
</body>
</html>
The Browser is not loading the angular library und I'm getting a error Resource interpreted as Script but transferred with MIME type text/html: "http://localhost:3000/bower_components/angular/angular.min.js"..
What I'm doing wrong? I couldn't find any answers from the previous questions.
This line says that you are serving your static files from ./public
use(express.static('./public'))
So only this tree will be exposed to the public:
├── main.html
├── src
└── views
Your bower_components diretory is not in public, thus it is not exposed.
To fix this, you can create a .bowerrc file in the root of your application with the following:
{
"directory": "public/bower_components/"
}
It will tell to bower to install the bower components in public instead of the default bower_components directory. Just run bower install after creating this file, and don't forget to update your index.html with the updated paths.
EDIT: Dont be tempted to change use(express.static('./public')) by use(express.static('./')) cause it will easily resolve your issue. It will expose your whole directory structure (and all your files) and is not good for obvious security reasons :)

Categories

Resources