FTP deployment and .scss #8570

Verickt · 2023-08-11T06:27:57Z

Verickt
Aug 11, 2023

Hello everybody,

I am new to statamic and am trying to deploy my site to a shared hosting via FTP.

I can npm run dev and npm run build locally without an issue. But when I upload it to the FTP: http://aky-p.rcbr.ch/ it tries to fetch the site.scss file.

Should a production site not only serve the compiled files in the /public/build directory?

I feel like I am missing out on some very essential information. I can't seem to find any ressources on it either. I am using the peak starter kit and added sass to it.

Answered by Verickt

Aug 14, 2023

I solved the issue. In my layout.antlers.html I added:

<link rel="stylesheet" href="{{ vite:asset src="resources/css/site.scss" }}"> <script src="{{ vite:asset src="resources/js/site.js" }}"></script>

and I created the tag like this:
`<?php

namespace App\Tags;
use \Statamic\Tags\Tags;
class ViteAssets extends Tags
{
protected static $handle = 'vite';

public function asset()
{
    $asset = $this->params->get('src');

    $manifestPath = public_path('build/manifest.json');
    $manifest = json_decode(file_get_contents($manifestPath), true);

    if (isset($manifest[$asset]['file'])) {
        return '/build/' . $manifest[$asset]['file'];
    }

    return null;
}

}
`

View full answer

duncanmcclean · 2023-08-11T06:54:39Z

duncanmcclean
Aug 11, 2023
Maintainer

Let's see your layout file and your Vite config.

1 reply

Verickt Aug 11, 2023
Author


import laravel from 'laravel-vite-plugin'
import { defineConfig, loadEnv } from 'vite'
import { networkInterfaces } from 'os'
import sass from 'vite-plugin-sass';
import VitePluginBrowserSync from 'vite-plugin-browser-sync'

/** @type {import('vite').UserConfig} */
export default defineConfig(({ command, mode }) => {
    const env = loadEnv(mode, process.cwd(), '')
    const ip = Object.values(networkInterfaces()).flat().find((i) => i.family == 'IPv4' && !i.internal)?.address
    const isSecuredSite = env.APP_URL.startsWith('https://')
    const url = env.APP_URL
    const host = url.replace(/^https?:\/\//, '')
    const useBrowserSync = env.VITE_BROWSERSYNC && ip

    if (useBrowserSync && isSecuredSite) {
        console.log('\x1b[31m%s\x1b[0m', 'Sorry, we didn\'t manage to get BrowserSync working with secured sites.');
        console.log('\x1b[31m%s\x1b[0m', 'If you can provide a solution, please enlighten us (https://github.com/studio1902/statamic-peak/pulls).');
        process.exit(1)
    }

    return {
        base: './',
        plugins: [
            laravel({
                refresh: true,
                valetTls: isSecuredSite ? host : false,
                input: [
                    'resources/css/site.scss',
                    'resources/js/site.js',
                ]
            }),
            (() => {
                return useBrowserSync ? VitePluginBrowserSync({
                    bs: {
                        proxy: url,
                        notify: false,
                        open: 'external',
                    },
                }) : null;
            })(),

        ],
        server: {
            https:true,
            host: useBrowserSync ? ip : host,
            open: useBrowserSync ? false : url,
        }
    }
});


{{# @name Layout @desc The default layout file. #}}

<!-- /layout.antlers.html -->
<!doctype html>
<html lang="{{ site:short_locale }}" class="antialiased">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, viewport-fit=cover"
        />
        {{ vite src="resources/css/site.scss|resources/js/site.js" }} {{
        partial:statamic-peak-seo::snippets/seo }} {{
        partial:statamic-peak-browser-appearance::snippets/browser_appearance }}
        {{ partial:statamic-peak-tools::snippets/live_preview }}
    </head>
    <body
        class="flex flex-col min-h-screen selection:bg-primary selection:text-white aky-body"
    >
        {{ partial:statamic-peak-tools::snippets/noscript }} {{
        partial:statamic-peak-tools::navigation/skip_to_content }} {{
        partial:statamic-peak-tools::components/toolbar }} {{ yield:seo_body }}
        {{ partial:layout/header }} {{ template_content }} {{
        partial:layout/footer }}
    </body>
</html>
<!-- End: /layout.antlers.html -->

jasonvarga · 2023-08-11T14:41:24Z

jasonvarga
Aug 11, 2023
Maintainer

You should run npm run build before deploying to production which puts all the files into public/build/assets. I think maybe you're uploading the dev version?

1 reply

Verickt Aug 14, 2023
Author

I am doing so. I am then uploading the whole project to the FTP. Should I just be uploading the public directory?

Verickt · 2023-08-14T10:19:13Z

Verickt
Aug 14, 2023
Author

So I can access /cp but clearing all caches in the Utilities did not work either. The issue seems to be that it tries to fetch:

when it should be fetching:

site-53d3eb58.js
site-0f59cd8.css
from the /public/build directory.

The .env on the server says production and debug=false but I still see the debug bar on production.

0 replies

Verickt · 2023-08-14T13:20:27Z

Verickt
Aug 14, 2023
Author

I solved the issue. In my layout.antlers.html I added:

<link rel="stylesheet" href="{{ vite:asset src="resources/css/site.scss" }}"> <script src="{{ vite:asset src="resources/js/site.js" }}"></script>

and I created the tag like this:
`<?php

namespace App\Tags;
use \Statamic\Tags\Tags;
class ViteAssets extends Tags
{
protected static $handle = 'vite';

public function asset()
{
    $asset = $this->params->get('src');

    $manifestPath = public_path('build/manifest.json');
    $manifest = json_decode(file_get_contents($manifestPath), true);

    if (isset($manifest[$asset]['file'])) {
        return '/build/' . $manifest[$asset]['file'];
    }

    return null;
}

}
`

1 reply

jasonvarga Aug 14, 2023
Maintainer

You know we have a vite tag built-in, right?
https://statamic.dev/tags/vite

Was it not doing something you needed?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FTP deployment and .scss #8570

{{title}}

Replies: 4 comments 3 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

Select a reply

FTP deployment and .scss #8570

Verickt Aug 11, 2023

Replies: 4 comments · 3 replies

duncanmcclean Aug 11, 2023 Maintainer

Verickt Aug 11, 2023 Author

jasonvarga Aug 11, 2023 Maintainer

Verickt Aug 14, 2023 Author

Verickt Aug 14, 2023 Author

Verickt Aug 14, 2023 Author

jasonvarga Aug 14, 2023 Maintainer

Verickt
Aug 11, 2023

Replies: 4 comments 3 replies

duncanmcclean
Aug 11, 2023
Maintainer

Verickt Aug 11, 2023
Author

jasonvarga
Aug 11, 2023
Maintainer

Verickt Aug 14, 2023
Author

Verickt
Aug 14, 2023
Author

Verickt
Aug 14, 2023
Author

jasonvarga Aug 14, 2023
Maintainer