Hosting simple NPM local server on GitHub gh-pages? - javascript

Is it possible to currently host local served content to gh-pages that isn't a framework?
Just simple html, css, and JS files along with API calls.
Currently using a npm package http-server for a simple server.
I attempted using npm gh-pages, however because I am not using a framework, I don't have a build option. Even using the default npm run-script build does not exist. Even so, I read that build is required for C/C++ bindings that causes a requirement for a build process.

gh-pages only serves static content, it doesn't allow server-side hosting.
This is no problem:
simple html, css, and JS files
but this
along with API calls.
is not possible unless you do everything through requests to external servers.

Related

Where to put builded nodejs application on my apache2 server

I am building project which I want to deploy on my own static ip server (apache2). I am using postgresql database and python api (want to use it just as API not frontend), currently I am making frontend where I need to use node packages because I need to download and install OpenLayers for usage with OSM maps, when I build nodejs project I get dist/ directory which I need to put to production. I would like to know if it means that I can just put it to /var/www/html directory and if no please where should put it? Or please some explanation how it works :) Thank you very much.
Putting the /dist directory in the /var/www/html directory is fine if it's a static build of the project, but it's recommended that you setup a virtual host so you can configure different sites served by a single Apache instance (e.g. you can run different projects on different sub-domains).
See this guide on setting up a virtual host on Ubuntu.

How to include script located in node_modules folder using codeigniter 4?

I need to install this plugin on my application, so I followed the instruction and executed:
npm install --save #ckeditor/ckeditor5-upload
Usually, to load a plugin I create a file inside the load directory which contains the plugin name, in particular:
Views
load
ckeditor.php
which contains this:
<!-- Push section js -->
<?= $this->section('js') ?>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/translations/it.js"></script>
<?= $this->endSection() ?>
so to include in a specific section of my app, I simply do:
<?= $this->include('App\Views\Backend\load\ckeditor') ?>
and this will inject the plugin into my app, but how can I do this with local dependencies installed via npm?
It looks like you want to use NPM modules client-side, which you actually can do. Check out Browserify: https://browserify.org/
It allows you to bundle up all the dependencies of NPM modules into JS code that you can deliver to the client, allowing you to use those NPM modules as 'native' functions in your client-side Javascript.
NPM (node package manager) packages are used for applications that run on node.js. Since your app is using PHP on backend, it's not suited to import backend JS packages.
In general, you can't use a backend JS package on a frontend because it usually contains code that is not available in the browser JS (such as accessing local files).
You'll need to find some other package that does a similar thing but for combination of PHP and browser JS.
Note: Configuring your HTTP server (usually Apache or Nginx) to publish the node_modules and link the (public URL of) NPM package from the frontend is a bad practice. Plus this particular package won't work anyway because it's using features that are not available in the browser JS.
In order to use CKEditor in your PHP application, The simplest way is to use CKEditor online builder tool and download complied version of the CKEditor code, and place it in your PHP application.
Visit: CKEditor online build
Follow the below steps:
Visit the above link of the CKEditor Online Build Tool.
Select Choose editor type as your desired editor.
Select the desired plugin that you want in your editor.
In the next section drag/drop and customize your editor layout.
At last select language and download the zip file.
Extract it and place it in your application's public folder eg.
public/ckeditor5.
Now navigate to the downloaded folder and open the index.html under
sample folder (public/ckeditor5/sample/index.html)
Copy last both scripts and place them in your working file where you
want to use CKEditor. Don't forget to modify the relative path of
your ../build/ckeditor.js file.

How to publish a client-side script using npm?

My nodejs package contains code for execution both on the backend, and a single .js file for execution on browsers. To make use of the browser script, it has to be put into a script element in an HTML file, obviously. My question is if there's a standard practice/convention with respect to how that browser .js file should be exposed to npm (or webpack or whatever) in a way that is independent of webpack, gulp, grunt, or other packaging tools. For example, by placing it into a scripts/ dir somewhere, or by including a simplistic nodejs/expressjs 3-line middleware that, when accessed via http://example.com/scripts/myscript.js, will send my script's content to browsers.
I've found this article, but that merely explains the trivial details of how to use a script element in an HTML page, rather than how to make npm install a script in standardized asset folder for pickup by static serving routes, asset management tools, or similar.
If you are publishing your package on NPM, an alternative that could work in your situation could be by using https://unpkg.com/ CDN. All packages that are published on NPM are available via this CDN.
Then in your frontend code you could simply reference that single js file you need.
<script src="https://unpkg.com/yourpackage/path/to/your/file.js"></script>
CDN is your best bet if you are not packing the web content in the same package. If your web contents are in the same package you could use
"scripts": {
"prepublish": "cp <source_path_of_file.js> <destination_dir>"
}
in package.json to pack it as a part of your npm package.

Project structure when using VueJS, VuelidateJS with NodeJS/Express

My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.
My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.
I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.
While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.
If I use VueJS's preferred option of WebPack, how should I change the structure of my code?
Should I have one NPM package for the frontend (generated by vue-cli init) and another for the Express backend app?
Should I put my Express App into the generated Vue frontend package?
Should I use browserify to do the job of WebPack and stay with my existing structure?
Or something else entirely?
I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.
If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.
If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:
mix.js('lib/your-entry-point-script.js', 'public/js/app.js');
Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.
Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.
You can read more about Mix at https://laravel.com/docs/5.7/mix

How to use New Relic with ember-cli?

right now I'm running an ember-cli application on heroku by serving it with the ember server command (not sure if this is the best method) and I'd like to integrate it with New Relic, but I have no idea how to do it.
Careful, ember server starts a live-reload server for development purposes — you edit a file, save it, and the application gets rebuild in an instant — you should not use it to serve an Ember app in production, it's a potential security risk. Normally you run ember server only on your local computer where you develop the code.
For production, build your app with ember build --environment=production, that will create a set of static files in your project's dist/ directory. You can upload these as you would upload any HTML/CSS/Javascript.
Keep in mind that Ember (and other frameworks of this kind like Angular and Backbone) is a single page application (SPA) framework; there is no server-side code at all, it all runs in the browser. Usually you would provide some sort of API (like a REST-API) on the server to provide and process data from a database or to provide other server-side services. That way you can develop the front and back-end separately.
I'm not too familiar with New Relic, but as far as I can tell it is analytics software that runs on the back-end, so it has nothing to do with your browser-side framework.
At the server folder, just find the index.js file and add require('newrelic'); at the beginning of the file. Of course you should also follow the instructions when you setup New Relic at you Heroku App, setting your application as a node.js app, which means you'll have to run npm install --save newrelic, go to your node_modules folder, find newrelic, copy newrelic.js file to the root of your application and edit the file with your app_name and license_key.
I recently removed my code from <meta ... in app/index.html and started to use this addon Ember-new-relic.
Get the JavaScript snippet.
And add it below <meta http-equiv="X-UA-Compatible"... in app/index.html.

Categories

Resources