Svelte is a newcomer in the field of front-end frameworks, known for its small, responsive and non-virtual Dom. Just like React has its corresponding SSR framework, Next-js, Svelte also has its own official SSR framework, Sapper, which is also small and flexible.

CloudBase (TCB) is Serverless cloud service provided by Tencent Cloud. It provides cloud functions, cloud storage, static deployment and other capabilities, which can be used to rapidly develop multi-terminal applications (small programs, public numbers, Web applications, Flutter clients…). , and then offer a nice free quota

Let’s deploy Svelte Sapper to CloudBase’s cloud function.

Open CloudBase for cloud development

Now Tencent Cloud Console open cloud development CloudBase, and create your application

Then create a new Nodejs cloud function.

Install dependencies

Make sure you have Node.js installed on your computer. If not, visit nodejs.org to install it.

Install the cli

The use of NPM

$ npm i -g @cloudbase/cli
Copy the code

Or Yarn

$ yarn global add @cloudbase/cli
Copy the code

After the installation is successful, you can enter cloudBase -v on the command line. Cloudbase can be abbreviated as TCB to simplify the input. For example, TCB-H gets help.

Log in to the cloudbase

$ tcb login
Copy the code

The browser will be redirected, as shown in the authorization page

Create a project

First pull the cloud function created above using the tCE command

$ tcb init
Copy the code

Interactive commands

$ cloudbase init? Select the associated environment XXX - [xxx-xxx]? Please enter project name svelte-sapper-TCb? Select template language Node? Configure your cloud development template svelte-sapper-TCB successfully.Copy the code

Then go to the directory you just created

cd /svelte-sapper-tcb
Copy the code

Then create the Svelte Sapper application in the Functions folder

$ npx degit "sveltejs/sapper-template#rollup" functions/svelte-sapper
Copy the code

The sapper application will be created in the functions/svelte-sapper directory.

$ cd. /functions/svelte-sapper$ npm install$ npm run dev 
Copy the code

Visit http://localhost:3000 in the browser, if you can see the following picture, it means that the installation is successful.

Retrofit the project to support TCB cloud functions

1. Change the name of the first project in functions in CloudBaserc.js to svelte-sapper

2. Cloud functions depend on the Serverless-Httpnpm package

$ npm i serverless-http -S
Copy the code

Cloud functions no longer require us to listen on system ports, /functions/svelte-sapper/ SRC /server.js file for Polka (Polka is similar to express Node.js framework). So we don’t have to rely on Polka anymore, so I’ll post the code here.

import sirv from 'sirv'; //import polka from'polka'; import compression from'compression'; import * as sapper from'@sapper/server'; import serverless from'serverless-http'const { PORT, NODE_ENV } = process.env; const dev = NODE_ENV ==='development'; const use = (... funs) => {return (req,res) => {        function dispath(index) {            if (index < 0 || index === funs.length) {return}            function next() {              return dispath(index + 1)            }            return funs[index](req,res,next)        }        return dispath(0)    }}export const main = serverless((req,res)=>{  use(        compression({ threshold: 0 }),        sirv('static', { dev }),        sapper.middleware()    )(req,res)})
Copy the code
  1. Add the cloud function call file

Svelte-sapper (” SRC “); svelte-sapper (” SRC “); SRC (” SRC “); During the simplicity we created the index.js file under svelte-sapper.

exports.main = require('./__sapper__/build/server/server').main
Copy the code

__sapper__/buildIs the sapperbuild file directory.

This will be called correctly.

The deployment of application

In the/functions provides/svelte – sapper directory

$ npm run build
Copy the code

Then deploy the application to TCB at the project root

$ tcb functions:deploy
Copy the code

After success, we tried to access https://${env-id}.service.tcloudbase.com and found that it was not accessible (env-id can be obtained from envId of Cloudbaserc.js). We also need to add a route to TCB.

$ tcb service:create -f svelte-sapper -p /svelte-sapper
Copy the code

Now we visit https://${env – id}. Service.tcloudbase.com/svelte-sapper can access to the content, but is an error message (originalUrl for undefined), Req.originalurl =req.url

Remember the svelte-sapper cloud route you just added? We also need to add req.baseurl =’/svelte-sapper’ to set the base of the page and modify the./functions/svelte-sapper/ SRC /server.js file.

export const main = serverless((req,res)=>{    req.originalUrl = req.url    req.baseUrl = '/svelte-sapper'    use(        compression({ threshold: 0 }),        sirv('static', { dev }),        sapper.middleware()    )(req,res)})
Copy the code

In addition, binaries such as images and audio files should not be used in cloud functions. The images we saw when dev just now cannot be displayed directly in cloud functions (they should be put into cloud storage and other places for official use). Here we simply convert to Base64.

Modify. / functions provides/svelte – sapper/SRC/routes/index. The svelte and then build before deployment.

$ tcb functions:deploy --force
Copy the code

Once successful, refresh the browser and you can see the beautiful Sapper web page.

Public account: Tencent Yunyun Development

Tencent Cloud development: Cloudbase.net

The development of cloud console: console.cloud.tencent.com/tcb?from=12…

Win more wonderful scan QR code to learn more