How to manage multiple deployments of a JavaScript Web App - javascript

I have a JavaScript web application that we are offering to customers using a SaaS model. Right now, the application consists of several HTML files, JavaScript files, CSS files, and image files as well as a single proxy page (ashx file) with a config file. We have deployed the app on GoDaddy's shared hosting service.
We currently deploy an exact copy of the entire app folder structure for each customer and I am quickly realizing that this is a nightmare in terms of maintenance when I need to provide an update or bug fix. I have to make the change to every instance of the app for every customer.
Is there a better way to handle this? I've heard of using a single code base with multiple config files for dynamic apps built on server-side technologies like ASP.Net or PHP, but I have no clue how I can do this with JavaScript, especially since the HTML pages need to be slightly different for each customer.

Related

How to serve 2 different versions of websites under the same domain?

I have started working on a project that needs a re-write. So, instead of doing a big bang release
we have decided to use Strangler Pattern which means the following
The current application (stack details below) will be running as is under the existing domain https://app.com
The existing (and new) features will be re-written in a new stack (details below) and deployed in parallel to the existing app (under the same domain https://app.com)
The requirements are
The end-user always works with the same domain https://app.com
Any existing feature migrated to a new app or a new feature is available by the under the same domain https://app.com
The stack and architecture of the current app is
HTML files with hardcoded data
CSS files
font files
PDFs
images
flash files
among other things.
Thee application is static. It has no database. It makes calls to other 3rd party APIs but does not have its own database (other than the files, and the images)
It sits under a directory and is served by running a web server (Apache) on a private dedicated server.
The stack and architecture of new re-write will
Use React or Gatsby
A standard build system that generates the static files
The data (PDF, Images) hosted somewhere else
Flash files (until we figure out a better way)
Given these requirements, I thought of having 2 versions of the app using some sort of load balancer such as Nginx and serve the URL patterns using a proxy.
For example
a request coming to https://app.com/productPage.html goes to existing app deployment (assuming it is not migrated)
a request coming to https://app.com/profilePage goes to existing app deployment (assuming it is migrated)
Now, considering this situation, I want to ask the following question
Is this approach looks sane? Are there better ways to deal with this situation?
How to implement such a reverse-proxy based system (considering Nginx)? (or if there is a better way)
I would love to hear out ideas and any resources/books/github that can help me learn and implement this.
Thanks a lot in advance!
I would recommend to create a v2 of pages that has been migrated to new functionality. And all links to the page should be updated to point to v2.
If anyone has done bookmark to old links, then those pages can simply redirect the user to the v2 ones by simply redirecting them using JS - window.location(url_of_target_page);

Firebase web application structure for multi-page site

I have a mobile app which uses Firebase. The apps are written for iOS and Android, but the plan is to write the administration module as a website. I've built many sites using .Net, but struggling to wrap my head around a javascript-based site integrating with Firebase. The site will need multiple pages for things such as table maintenance, user maintenance, etc., but all the examples I've seen are a single HTML file. Can anyone point me to an example of a multi-html file site, or provide some direction as to best practices and how to organize the site.
Here are some of the questions I'm not sure of;
Does the firebase initialization code only get run once, or does it need to be run in every HTML file?
If I declare variables in some startup file (ie a var for defaultDatabase), how can I access those in another file?
If I want to have application-wide functions, such as Firebase signin or signout, where should they go?
What's the best way to organize and implement common components, ie page header/footer, so that they are consistent throughout all pages?
TIA for any direction.

Bundles and Virtual Paths

I am setting up a new site using angular, mvc and web api. The static content (js, css, images, etc) will be in Site A, the MVC site will be in Site B and the api will be in Site C. These are all separate sites, not virtual directories. I'm trying to use bundling in the MVC site to bundle the js and css files from the static site for use in the MVC site.
I've set up a Virtual Path Provider but when I load the site angular doesn't work and also doesn't throw any errors. I'm assuming that the angular.js file is not being loaded from the bundle because if I include a local javascript file angular works.
Is what I want to do possible? If so, how?
Virtual Path Providers only apply to views, not things like CSS and JS. Unfortunately, there's not really a good way to handle this scenario. The bundler can only act on files within the same project, not those in a separate project. If you want a separate site to handle your static assets, then you pretty much just have to resort to referencing them directly. You can use the Web.config's app settings section to set the base URL for your static site (that way you have just one place to go if you need to change it later and you can do things like run transforms on it to have a different value in production). This also means you're somewhat on your own for bundling and minification. However, you can make your static site an MVC site as well just to get the bundling infrastructure and then use that site to handle bundling. All your bundles should be at the standard location of /Content/[style bundle name].css or /bundles/[script bundle name].js. There's a cache busting string added to the path, but you can somewhat handle that manually.

How to design an UI framework for multiple web applications with the same layout?

I'm trying to design an ui framework for multiple web applications but having trouble designing the infrastructure for our situation:
7 (or more) separated web applications build with asp.net mvc
Some web applications on internal servers, some hosted
All with the same basic css/images/javascript (shared components each application can use)
Every application has some unique css and javascript
Every application has its own TFS branch and solution
Every application has its own release management (monthly/yearly/etc.)
What I want to achieve:
Fix UI bugs once and not for all applications
Consistent UI for all applications
Don't bother the other developers with UI stuff
What would be a smart infrastructure?
In my experience the difficulty in sharing non-compiled code between web projects is mostly a source control one. We use an internal NuGet server to share compiled code, but this doesn't work very well for non-compiled code. For this stuff (HTML, sripts, content) I find it's easiest to keep all common components of the framework in a single hierarchy that can be stored as an independent project or submodule in whatever source control system you use, e.g.
/myframework/scripts
/myframework/styles
/myframework/images
If "myframework" is managed as a submodule, you should be able to maintain it independently of the projects you include it in. This is straightforward with git and svn.
Your application-specific scripts and content can be kept in whatever normal hierarchy you like as usual, e.g.
/scripts
/styles
/images
You might also look at how popular front-end frameworks are set up in their default configuration. For example, Zurb Foundation provides a set of scripts, styles and content templates. Everything is stored under folders Content and Javascripts by default, and they counsel that you don't change their style sheet but rather override styles in a separate style sheet for anything custom. This keeps you safe from changes to the shared framework. Applying a similar policy to your own internal framework seems sensible.
We ended up using NuGet to distribute the css/js/images to all the different projects. The global ui has its own team project with automated nuget package creation to our internal nuget server.

Managing ServerSide FileSystem through Web Application

I am developing a web application that will manage directories and files through its web interface.
Developing a web interface is one part, and it is in advanced progress. However, I start thinking, how should I develop the server application, that will manage the files and directories based on user input.
The client will be created using standard tools:
HTML5
CSS3
JavaScript
PHP - Despite it is server side application, it will be responsible mostly for Dynamic Websites
MySQL - Despite it is server side application, it will be responsible mostly for keeping information about users, their settings, etc..
Would you advise me please, what would be a server-side programming language of choice to manage server-side file system? Is there any API available, that will allow me to do exactly what I wish? Is it possible to manage the server-side file system in server-side JavaScript, or should I chose another tool? Server-side JavaScript comes to my mind as a logical chocie, as I use it for the client side as well.
This is what I wish to achieve:
To create new directories and files
To delete directories and files
To track the directory and file size
To move files between directories
To provide content of the directories and subdirectories
Ideally, the solution should be platform independent and should work on both, Linux Ubuntu and Windows Server OS.
I understand that my question is a bit broad. I would be thankful, if you point me to the right direction, which technologies to start studying, to be able to accomplish the above mentioned.
Thank you.
You already have a very capable serverside language in your list. PHP.
PHP can do all of the things you listed above... and a few you didn't list as well :)
To create new directories and files
New files can be created with the touch() function, and new directories with the [mkdir()](http://php.net/manual/en/function.mkdir.php function.
To delete directories and files
Deletion is done with rmdir() and unlink().
To track the directory and file size
File sizes can be monitored using the filesize() function. Couldn't find a native folder size function but this Stack Overflow post may be useful - https://stackoverflow.com/a/478161/558021
To move files between directories
Moving files and directories can be accomplished by using the rename() function.
To provide content of the directories and subdirectories
One of the functions PHP gives us to scan folders is called glob() it glob - it allows you to find pathnames matching a pattern, so if you give it a wildcard character * it will find all the files in a certain location.

Categories