Site using VUE-CLI¶
In this tutorial you will learn how to create an static site in Daspanel using vue-cli.
Open the admin in your browser Sites module
The admin user and your password are the ones you choose when creating your project as instructed here.
Create new site¶
Go to the Sites module
- Add new site clicking the icone in the upper right of the Sites panel to see the page with the options for the new site:
- Write an description for your new site
- Choose 'Generic site' as Type
- And 'Static' as Engine
- Click on the button 'CREATE SITE'
After the site has been created, a screen will be displayed to upload any remote content that is in a ZIP file. For this howto we will NOT use this feature.
- Click the left arrow at the top of the screen to return to the sites page.
vue-cli is a program that must be run through a console. To do this open
the console of the site that was created:
- Click the second bullet to display the toolbox management area of the chosen site.
The site card will be changed to the toolbox management area:
- Click on the console icon to access it.
If this is the first time you access the console in the current session of your browser, a screen like this will appear to log in:
- User Name: Is the console user.
Password: Is the console user passord.
Click the login in button.
You can easily obtain login credentials in the *** Console *** section of
System->Services Users module using the link below:
After your browser has an authentication token with console access permission, the web page of the console will be displayed:
Now run this command on the console:
npm install -g vue-cli
NPM global install (-g)
Because the nature of the Docker
npm packages installed globally through
the console does not persist after a Docker reboot. If you want to install
vue-cli in the same directory where the site is so that it is permanently
saved run the command like this:
npm install vue-cli
However, in doing this the vue-cli command must be executed like this:
./node_modules/.bin/vue init pwa .
Because normally globally installed packages are usually just line command tools, there is no problem in reinstalling them every time that Docker is rebooted. Just do not globally install the packages that are used by your site. Click here to understand better.
Create initial content using vue-cli¶
vue-cli package has been installed it is time to create the initial content
of the site using it.
Run this command on the console:
vue init pwa .
. indicates that the site content will be created in the current console
directory. If instead you use
myproject instead of
. the site will be created
myproject sub directory.
install all dependencies using
Build static site¶
Sites that are created using
vue-cli, or similar tools, need to be build before
they can be accessed. In the case of our example run the following command:
npm run build
The static content of the site is generated and placed in the
Set root dir of the site¶
When the site was created its content is initially served from the directory of its default version.
That is, when you access, for example,
the content displayed is being fetched from a directory like this
However, by running the
npm run build command the static content of the site
will be placed in a sub directory.
Before viewing the site configure the root dir of it going to manage the available versions of a site go to the Sites module
- Click the third bullet to display the version management area of the chosen site.
The site card will be changed to the version management area:
- Click the MANAGE buttom to go the management page.
On the next page you will see a list of all the existing versions for the site:
- Click the Edit button for the choosen site.
- Set the directory relative to the top level directory where the site version
exists. In this case it is
- Click UPDATE VERSION to save changes.
View the new site¶
Go to the Sites module. You will see a page like this:
- Click the PREVIEW button of the choosen site and a new window will open in your browser displaying the contents of the active version of the site.
Now just customize the site for your needs.
Using npm server for development¶
Instead of running the
npm run build command every time some site file is
changed Daspanel allows the
npm development server to be used.
Go back to the site console and run the following command:
npm run dev
See which port the server is running on. In our case the port is 8080, as can be seen in the screenshot above.
Open a new blank tab in your browser and enter the preview address of the
development server. This address is formed by prefix
https://_ds. + site URL +
To facilitate, just copy the address of the preview window that was opened
before in this howto. The URL would look something like:
Now to view any changes made on the site just give a reload on the site page to see the changes.
When the site is ready for publishing, simply execute this command on its console:
npm run build
And its static content will be generated in the
Ports that can be used
The Daspanel load balancer only supports ports 8080 and 3000 for running
npm run dev. If your site uses another you will have to make the necessary
adjustments to it.