In the last post, we talked about Strapi. How to set it up and how it can be useful over alternatives.
Today we're building upon those result and learn how to integrate Strapi with Svelte
TLDR
First we'll discuss how to modify our svelte app to fetch the data from the Strapi backend. Once this is set up we'll learn how to locally build a static website that can be uploaded to a static web-hoster.
For some people that are already enough for the ones that need more, we'll explain how to host the website more dynamically with the use of a Linux server.
I'll also link tutorials on how to set up a domain and give examples on what servers can be used.
Fetching the data locally
In the previous Blogpost: Svelte, Strapi, Nginx (3) we prepared the fetching of the data from an external source. Back then we didn't have an URL to fetch from since our backend did not exist. We simulate the fetching process with a fake delayed Promise. This can now be updated to the actual fetching function.
//Fetch the data
let fetchUrl = "http://localhost:1337/"
async function fetchData(){
let result = new Promise( async (resolve, reject) => {
fetch(fetchUrl + "blog-posts").then(async result => {
resolve( await result.json() )
})
}
updateLookupData( await result )
return lookup;
}
We modified the fetch function to a promise that fetches the data from an external server specified via the fetch URL.
Again this fetching is not done by the user but by the server that runs your dynamic or builds your static website. This has some advantages and disadvantages compared to letting the user access the database directly. For the most part, this enables if done correctly to bring advantages of a static page to a dynamic page. This also enables together with sapper to use the backend only locally and build a static page locally. This enables to use of a static website hoster while still having some of an admin panel in the background.
In the next step this is exactly what I will show. It is not necessarily advised to offer this to a customer that is not very tech-savvy but this could be build upon to enable static server files for download to a customer that demands a static hosting service.
Building a static page Locally
To generate a static site from this you as discussed before you first have to run the start command for Strapi in its source folder
cd [strapi source folder]
npm run build
npm run start
Afterwards its time to build the website locally
If we run the following commands we will build the website and start it as a dynamic website
cd [svelte-blog source folder]
npm run build
npm run start
to actually render it statically we also need to run:
npm run export
In the folder sapper/export you can then find the code to be uploaded to a server.
As discussed before this could be used to rebuild the static page on a server whenever someone changes something of Strapi. This enables to offer a static website to a customer that he only needs to upload to the server whenever he wants to do changes. This can of course also be done programmatically if the hoster offers a CLI.
For most people, however, it is better to offer a dynamic website on a server. For this, it is advised to internally reroute the requests to certain ports instead of letting the user enter a port in an URL
Using Nginx to combine sapper and svelte on a Linux server
Linux Server
To enable the site to run on a Linux server we need to first install Nginx on a Linux server.
I'm currently using Digital Ocean for this since it's pretty affordable and quick to set up. I've so far only had a good experience with it. If you are currently looking for a hoster and are interested in supporting me follow this referral link.
This will
- Give you a 100$ worth in credits that can be used for 60-days free of charge to host your own server
- Give me 25$ of credits if you use it further.
For a simple blog in the beginning a 10$ server should be enough.
Any other virtual or dedicated server will do. For this tutorial I'll talk about the lineup server.
After this, you will need to connect to your server via a terminal. In the case of Digital Ocean, they offer a terminal in the browser, but I would rather suggest using a command-line tool like Putty or Git-Bash on Windows, or the terminal on Linux or Mac to connect to the server via SSH.
We will later use SSH to deploy our files so it is advised to set this up. There are other ways to deploy your code but if you want to follow this tutorial then this is necessary.
In the case of Digital Ocean this is explained here.
You will also need a user with sudo access since it is not advised to run the commands as the root user. This tutorial explains how to create one.
Getting a Domain
Aside from a server you will also need a Domain, to make your website easier to access.
This can be registered at any domain registrar like Google Domains, GoDaddy, or any other domain registrar.
Then you will need to set the URL to the IP address of your server. This is explained in detail for various registrars at this tutorial.
Once this is done we should also create a second subdomain to access the admin platform. This is further explained here.
The admin subdomain for now will be admin.test.com (amusing the URL is test.com).
What is Nginx
"NGINX is open source software for web serving, reverse proxying, caching, load balancing, media streaming, and more." (source nginx doku).
It is open-source software that takes requests from anywhere and redirects them to where they need to be. It looks at the query itself which allows directing certain queries to process A and others to process B. It doesn't matter where this process is located, on a different port, a different server, or possibly a docker container. In our case, this is needed since the user might access pictures and content data directly from Strapi while still requesting the same URL. It can also be seen as additional security because users only can access pictures from strapi while the rest will always go directly to the svelte app. To access the admin panel the user will need to know a separate subdomain,
Installing Nginx
Once this is done we are ready to set up Nginx a Firwall, and upload our code.
sudo apt update
sudo apt install nginx ufw -y
sudo ufw allow ssh
sudo ufw allow 'Nginx Full'
The installation status of nginx can then be checked via:
sudo systemctl status nginx
The commands that involve UFW are to install a firewall to only allow certain ports to be accessed as a security precaution.
The next thing we will need to do is enable a Firewall to ensure that the others can only connect to ports they are allowed to access.
After this we can start nginx via
sudo systemctl start nginx
or reload it in between changes that we are going to make via
sudo systemctl reload nginx
Preparing Nginx for the Sapper frontend
After all is installed we need to first set up the frontend and then the backend.
For the frontend, we need to create a new file at /etc/nginx/sites-available with the filename of our domain. Let's say the domain is www.test.com
To create it we run:
cd /etc/nginx/sites-available
sudo nano www.test.com
And the we copy this code into the terminal editor
server {
server_name test.com www.test.com;
location /uploads {
proxy_pass http://localhost:1337;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
Then to exit and save the file we just need to press Ctrl-x and then Y.
This code does 2 things
- It reroutes every call to test.com or www.test.com to the sapper app which is going to be running on port 3000
- It reroutes every call to www.test.com or www.test.com/uploads to port 1337 which is going to be the port that Strapi will run on
The latter is necessary if we want to enable image support since they will be located at www.test.com/uploads/someImage.jpg for example.
Once this is set up we need to enable this url by adding a symlink to it at /etc/nginx/sites-enabled.
A symlink is short for Symbolic Link and is a way in linux to use reference to the same file in another directory. It is like having the same file in two locations at once.
For this we will simply run:
sudo ln -s /etc/nginx/sites-available/www.test.com /etc/nginx/sites-enabled/www.test.com
sudo ln -s /etc/nginx/sites-available/www.test.com /etc/nginx/sites-enabled/test.com
This enables this rerouting to be used when you access test.com as well as www.test.com.
Once this is done we can access our server as soon as it is running.
Prepare Nginx for Strapi
As discussed before we will create an admin panel at www.admin.test.com.
We agan start by runing:
cd /etc/nginx/sites-available
sudo nano www.admin.test.com
and we will add following content:
server {
server_name admin.text.com www.admin.test.com;
location / {
proxy_pass http://localhost:1337;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
And again save with Ctrl-x and the Y.
This also needs a symlink for wich we run:
sudo ln -s /etc/nginx/sites-available/www.admin.test.com /etc/nginx/sites-enabled/www.admin.test.com
sudo ln -s /etc/nginx/sites-available/www.admin.test.com /etc/nginx/sites-enabled/admin.test.com
Once this is done we can reload nginx via:
sudo systemctl reload nginx
Deployment
Our server is now ready to deploy our website to it. To get everything working we first have to make sure there is npm installed. For this we want node 14.x because higher versions are not stable yet and are not compatible with Strapi.
To install node we run:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
This adds the right node version to the source list of our package manager since we want to make sure that there is 14 LTS and not 16.x version of node installed.
Now we install node
sudo apt -y install nodejs
And check if everything worked out by runing
node -v
After this it is also good to install developer tools that node might need
sudo apt -y install gcc g++ make
Once this is installed we also want to install pm2 which is a process manager that helps us keep our processes running and restarts them if the server restarts.
node install -g pm2
After this is done it's time to copy our files onto the server. For this, I advise using Git-Bash to copy files if you are using Windows. For Linux or Mac, the necessary tools should already be installed.
To copy the files we need to open a new terminal to make sure we're not connected to our server to our local computer where our two programs are located.
Then to deploy the files to the server we simply run:
scp -r svelte_surce_folder remote_username@10.10.0.2:/remote/directory
scp stands for Secure File Copy and is a too to copy files via ssh from one computer so another.
In our case we add -r to make sure its also copys the contents of the folder recursively.
The second parameter is the source directory of our code.
On Windows (Git-Bash) that migh look like /c/projects/svelte-blog
One mac or linux this could be $HOME/Projects/svelte-blog
To get the path you can open a terminal in your project folder and type
pwd
The third parameter is the username of the user on the server, followed by the IP address and the path on the server that the folder should be copied. Here you can get your path again by using pwd.
Going Live
After copying both the strapi backend as well as the svelte frontend to the Linux server the last thing to do is get both of them running.
Strapi
Since the frontend depends on the backend it is necessary to run this first.
So the first thing to do is connect to the server again and go to the folder we just copied
cd strapi/path
npm install
npm run develop
Once in the folder, we first install the dependencies and then build and start the server. Once this is done we should be able to access it via a browser by entering admin.test.com while test is the URL of the domain that we made above. This should enable us again to make an admin account and then create blog posts.
Later we will start this via
npm run build
npm run start
The build is only necessary if we do changes to the structure while the start starts the built site in production mode.
Once this is running we open another terminal, connect to the Linux server again and go to the folder of the svelt project we just copied.
cd svelte/path
npm install
npm run build
npm run start
After this is done the frontend should be reachable via test.com. Again test.com has to be replaced with the URL of our domain.
After confirming that is works the last thing necessary is to make sure they will be restarted and running in the background even if we're not paying attention to the servers. Here pm2 comes into play.
PM2
To do this we first need to start the project via pm2;
Strapi
First stop the strapi server that we started before so the port will be free.
After this we enter the folder for strapi again and run
npm run build
pm2 start --name=blog_backend npm -- start
Svelte Frontend
Again stop the current frontend and run
npm run build;
pm2 start --name=blog npm -- start
Saving the state
Once both processes are running through pm2 and we can verify that they are reachable we have to save the state so pm2 will start this state again when the machine restarts.
pm2 save
That's it!
This was a long ride but our blog should be up and running by now.
In this series, I only went over the main difficulties of creating a blog that way. A Blog or any other kind of website doesn't only have this but also other features that need to be implemented. This however should all be possible by using the tools we discussed and learned here in the last view posts.
If you have any questions or problems understanding a step, please feel free to contact me in the about form. I'm happy to help. This will also help me to update those steps to make them more understandable for future readers.