It has been a little over a year since I wrote an article on how to automatically publish website changes through Github Actions. Though we continue on the same general topic, we’ll take a step back and publish a website manually. The reason behind this is that I’ve been informed that our customer support often receive questions regarding how to install JS frameworks in our webservers or how to deploy web apps built on these frameworks to our webservers.

Let it be said that I do not recommend installing JS frameworks or dealing with all the development work directly on the server. This is because the web app configuration files, views-components-routing files that have yet to be bundled and especially the node modules folder take up a decent portion of the resources allocated in the hosting package.
Thus, I will continue on deployment to the server rather than installation and development.
It may sound complicated but it’s really quite simple – all you need to do is to move all files from the built web application folder to the root folder of your site’s domain in the webserver.
Web application folder structure
For a long time the most popular JavaScript frameworks have been React, Angular and Vue. In this post I will use Vue as an example. Nevertheless, if you use React, Angular or some other JS framework instead, there’s no need to close this tab right away. If we exclude the possible differences between these frameworks, the logic behind deployment remains quite similar.
First, let’s look at how the folder structure of a Vue app might look like.
In my example I’ve created a Vue application based on Vite, and added Vue Router and TypeScript support to it.

The project root folder (vue-project in my example) includes the aforementioned node_modules folder which is created after running npm install
for the first time. In addition, there are the public and src folders aswell as a bunch of application configuration files.
Most of the application development takes place in the src folder – this is where you can find the app’s views, components, routes, etc. When building the web application, these files are optimized and bundled. The public folder contents are not optimized or bundled, they are copied into the built folder just as they are.
An error regarding Vue Router
If you add Vue Router to your app when creating a new Vue project, it will be configured by default to use HTML5 history mode. This is the most SEO-friendly, nice looking and easiest to understand, and therefore the suggested Vue Router history mode.
However, there is a problem with this history mode which occurs if you build and deploy the app as-is. That is, if you directly try to visit the URL of some of your application’s pages (for example https://randomexample.eu/somepage
), you land on Error 404 (Page Not Found). The same will happen if you navigate from the main page to another page and refresh.
Luckilly it’s easy to avoid this problem. In our (Apache based) webhosting servers you would need to include a .htaccess
file in your website’s root folder. The content of this file should be as follows:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
Code language: JavaScript (javascript)
I recommend creating this file in your web application’s ”public” folder so it will always be included in your built application folder.
Building your web application
Now, when the application seems ready for deployment, we’ll run the npm run build
command and a new dist folder appears in our folder structure. (The folder might be named differently in other frameworks)

In this folder we see the application’s index file, favicon, the .htaccess file we created because of the Vue Router error and an assets folder which includes the application’s logic and styling files in .js and .css formats.
In order to publish / deploy the web application, we will need to move all of the contents of the ”dist” folder to the root folder of our website’s domain in the web server.
Moving the files to the server
There are several different ways to move files into the server (FTP, SFTP, SSH) – the simples of them being over FTP (we have a web-based FTP application in My Zone). There are also helpful guides on connecting to the server with all three of these ways in our support knowledgebase at https://support.zone.eu/
No matter which way you decide to do it, you will need to upload the application’s files to your website domain’s root folder.
If the application is to open from your main domain (f.e https://randomexample.eu/
) and you haven’t modified the root folder from your settings in My Zone, the contents of the dist folder must be moved to the htdocs folder on the server.
If the web app should open from a subdomain (f.e https://subdomain.randomexample.eu/
), the application files must be moved to the folder which is named after the subdomain.
Will I need to delete and reupload files every time I make a change in the app?
Yes.
But you can also make this easier for yourself if you use the version control software Git alongside with the Github environment and it’s Actions functionality: https://www.zone.eu/blog/2023/12/21/automatic-publication-of-website-changes-through-github-actions/
Post navigation
Popular posts

Why choose a .EU domain today?

Ecommerce SEO essentials: How to boost search visibility and drive sales

New at Zone: Varist – even stronger malware protection
