Put flynt website in production

[comsup]

Hi there,
I was wondering if there is somewhere a process to put the theme in production with the only needed files. I have a process to put the website in production it's not the question but I'm looking for a files list we don't need in the production environement.
I'm working on a dev server with phpstorm and when the website is ready I move it to the production server and the idea is to take the minimum of files for the production environnement.
So is there a command to generate a "light theme" or a files list to know which files we don't need on production?

Thanks!

[steffenbew]

Hi @comsup, I wrote a tutorial about deploying a Flynt theme with GitHub Actions:
https://css-tricks.com/continuous-deployments-for-wordpress-using-github-actions/
In that article, I'm primarily excluding the node_modules and .git directories from the deployment.

Depending on your build configuration, you might also exclude the assets folder, as all assets should be revved and copied over into the dist folder after the build step. But your assets folder might also include files that do not get copied over and would be missing.

Additionally, you could exclude the dotfiles, the composer-, webpack- and other build-files from the theme root directory.
But excluding the node_modules (and .git directory) should have the biggest impact on the amount of files transferred.

Please note: The standard build files do not include credentials, like database or server access. But if you customised the build process and added anything alike, be sure not to transfer files with credentials in it, unless necessary, because those might accidentally get exposed, depending on your production server configuration. That's why in the tutorial I'm excluding the deploy_key that is part of the deployment process.

[comsup]

Many thanks !

[comsup]

Also is there a way to reduce the main.js size? the file size is 2.25mo, and I don't use a lots of js, is it the normal file size?
thanks,

[comsup]

Ok,
I just look at a website create with flynt (https://thearcofhr.org) and the js size is 3.2MO are you sure about js size generate by flynt?

[domtra]

hey @comsup , it looks like you are deploying the development build of flynt. This is created by running npm run start.
If you want to bundle for production, best run npm run build. This will create minified versions and not include the sourcemaps.
Let me know if you need any extra info.

[comsup]

Ok I have plenty of errors with run build but I'll look at this thanks

[domtra]

This is probably because of linting errors.
If you do not mind having them in your codebase, you could edit the following line in your project

flynt/package.json

Line 13 in 6ba22b9

"build": "run-s --silent checkVersion clean lint build:production build:rev",

and remove the lint command from the execution.

[comsup]

Perfect that's work and I have 350kb file thanks a lotttttts !!

[comsup]

Another (last!) issue is about linking the assets from .scss files for production. I have a component with an Assets folders and some .svf files on it. On the _style.scss of that component I refer to thoses svg like "content: url("../../Components/ComsUpNavigationTop/Assets/arrow-down.svg");" but when the run build is start the svg is copy to the dist folder but the link on my scss doesn't work anymore. Is there a good way to write link to svg or image in our scss file?

[harunbleech]

Hi @comsup, Try to do it like this url("../Components/ComsUpNavigationTop/Assets/arrow-down.svg");

[comsup]

That works thanks