Edit documentation Edit document
SSR/SSG

Server

This part of the documentation is about the server side of technology. Here you can find a list of all server functions:

  1. Local installation and configuration.
  2. Server Side Rendering.
  3. Caching.
  4. Image sources preparing.
  5. Sitemap generation.
  6. Redirects.
  7. Regeneration.

To work with this server, you need two things:

  1. Linux or MacOS
  2. Node version 16 or higher.

Standard Mode

The standard server installation is quite simple. In a separate folder, open the terminal and run:

npm i @gudhub/ssg-website-cli -g

Note that this command must be called globally.

This command will automatically install the CLI and Web server on your computer. It only needs to be installed once and then can be used for all your projects. After that, you have to create the website.

GudHub authorization

Namely, download all default packages and files. You can do that using:

create-gudhub-website

After running this command you need to enter your authorization data. Specifically, enter your GudHub account email and password. This is necessary to create two applications in your GudHub account that will help you control the content of your website.

If you don't have a GudHub account yet, sign up here.

Applications for content control

  • Pages - contains content of every page
  • Team - contains information about the team to be displayed on the About Us page

A full-fledged website project will also appear in the folder. This site can be filled in, customized, or even completely redesigned. For more information about editing a website, see Website.

When the project is created run:

npm run start

It automatically starts the server and raises created website. After that, the site opens in the browser.

GudHub website template

The server should remain raised while you work on the project.

That is because the web server tracks updates and rebuild the site.

Advanced Mode

The advanced installation allows you to customize certain server parameters. Due to them, you can customize the work of the server.

A server in advanced mode allows you to run multiple sites using only one server.

The first steps here are similar to the Standard Mode. Start by creating a folder where your project will be stored and open a terminal in it. The next step is installing the CLI:

npm i @gudhub/ssg-website-cli -g

Remember that this command must be called globally.

Due to this, the CLI and web server will be installed on your computer. And as you could already read, the next step is to run:

create-gudhub-website

Now, you need to enter your credentials in the console, namely your email and password. This is necessary for applications to appear in your GudHub account which will help you manage the content of the site. More information can be found in the previous chapter.

Also, the site files will appear in the project folder. This is a full-fledged project that you can customize at your discretion.

Even though the web server was installed with the CLI, we cannot use it in the advanced method. Because it is configured for the specific command described in the previous section. So you have to install the web server separately. To do this, use the following command:

npm i @gudhub/webserver -g

Since this mode allows you to work with different sites on the same server, you will have to run the site and the server separately in different terminals.

After that, you can run the webpack command you need in a terminal:

npm run dev

or, for example:

npm run build

Then run the following command in the new terminal. It will start the web server:

gudhub-web-server

Additional server port and host configuration properties are also available.

Flag Default value Description
-p 7777 allows you to specify a port on which the server will run
-host 127.0.0.1 allows you to specify your own host; it can be used to run the server at a local ip address

The command with additional properties looks like this:

gudhub-web-server -p 8000 -host localhost

When using it, the server starts at localhost:8000.

The server must be raised during development.

The website will open in your browser. From now on you will see all updates here. The server responds to changes and rebuilds the site.

Troubleshooting

When working with any technology, certain problems may arise. Therefore, we have collected the most common problems encountered and how to solve them.

Node Version

The problems can starts from the beginning. If after entering first two commands the terminal returns error, try to check the version of node on your pc. To do that run command:

node -v

If the version is lower than 16.18.0, update the node version.

Image Generating

The GudHub server has a unique feature for working with images. Namely, it automatically creates images in webp format from it. And then saves the created version and the original image with the original file name on the server. The site will use the webp image.

The server generates images up to 600px in size.

If the image is larger than 600 pixels, the server creates a webp of the same size and saves both versions. After that, the server creates a copy of the original image reduced to 600 pixels and makes a webp version for it as well. So, as a result, the server will save 4 images in the cache folder.

Also, the server repeats the above operations twice if the image size exceeds 1200 px. This means that two copies of the original file will be created. The first copy has a size of 1200px, and the second copy has a size of 600px.

This operation allows the server to use images of different sizes for different devices. This allows the site to load faster on a phone and not lose image quality on a monitor.

The server also has a feature that prevents images that do not need to be updated from being re-generated. It is described in the chapter Caсhing.