preact-cli | 😺 Your next Preact PWA starts in 30 seconds | Frontend Framework library
kandi X-RAY | preact-cli Summary
kandi X-RAY | preact-cli Summary
Your next Preact PWA starts in 30 seconds.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- Returns the client config .
- handles rendering errors
- Prox development mode .
- Parse config .
- Creates request parameters from the template
- Fetches the data from the prerender data .
- Fetch the templates from the repository
- Main application build
- Browser - development server .
- Sets the proxy for the given target URL .
preact-cli Key Features
preact-cli Examples and Code Snippets
License : Strong Copyleft (CC BY-SA 4.0)
Copynpx preact-cli create ... --yarn`
### Preact instalation
npm install -g preact-cli
### create react app equivalent
preact create default my-project
### Go into the generated project folder
cd my-project/
### Start the devserver
npm start
Community Discussions
Trending Discussions on preact-cli
QUESTION
I've been playing with wmr and preact-iso and coming from preact-cli, preact-router, etc, I'm a bit confused on how to do some of the things I used to be able to do.
Case in point: preact-router's route() function seems to be missing from preact-iso's router package.
How would I route from code?
I used to be able to do this:
...ANSWER
Answered 2022-Jan-18 at 21:19route() exists upon the useLocation hook.
QUESTION
I've added styled-jsx to my Preact (set up with this TS template) project, and can style things inline via the
But if I extract that style into a separate css variable (either in the same file or externally) while following their instructions I get the following error:
ANSWER
Answered 2021-Dec-25 at 01:14Using .babelrc isn't supported at the moment in Preact-CLI, though this is due to an odd bug that I haven't yet been able to track down. Sorry about that.
You do however still have a way to edit the Webpack config, and that's with your preact.config.js, the docs for which can be found here. In your case, what you'll want is the following:
preact.config.js
QUESTION
I am building a React app well technically preact but on the build it fails on the current code:
This is what the "helper class" looks like:
...ANSWER
Answered 2021-Dec-08 at 10:01This syntax should work:
QUESTION
I created a Preact app using the preact-cli, and need to add react-router-dom to my project for routing. How can I add react-router to the project without ejecting the app, in order to install the router library?
I've seen options for adding webpack, but that' requires ejecting the app.
I added "preact-compat": "^3.19.0", to my package.json in the project, but not sure how to either add webpack or import the necessary react-router imports:
import {BrowserRouter as Router, Route, Switch, NavLink} from 'react-router-dom';
ANSWER
Answered 2021-Nov-20 at 01:09but that' requires ejecting the app
There is no way to "eject" from preact-cli. That isn't functionality that exists, so I'm a bit confused on what it is that you're referring to.
We make the entire config available to you through your preact.config.js. With this, you can configure absolutely any part of the Webpack config that you'd like, and only those bits. You don't need to do anything like CRA's eject, where you have to now own the entire config yourself. You can edit the pieces you want, and leave everything else out of site & out of mind.
I've seen options for adding webpack
preact-cli uses Webpack for bundling, it's the fundamental underlying tool. There's no way to use it without Webpack, so this doesn't make much sense.
I added
"preact-compat": "^3.19.0"
Remove this. preact-cli already adds compat, and does it from the correct source.
If you read the docs for preact-compat, you'll see it's only for Preact 8.x and prior, which is a few years out-of-date at this point. The correct compat package for v10+ is preact/compat. We set this up for you already in preact-cli though, so nothing you need to do yourself.
Why do you think you need to do any configuration just to import the library? Did you run into any errors, or maybe docs that are confusing/misworded? Just ran a test with v6, should work out-of-the-box after you swap it in for preact-router (assuming you've set up a preact-cli project using one of our templates)
QUESTION
I am using preact, following the docs, I have used the command npx preact-cli create default my-project to set up the project. It is suggested that preact projects are accompanied with low sizes, so I decided to test it and tried npm run build right away without changing the boilderplate. The result is showing a bit over 700kb of size for the build folder.I have read that it should be around 30 to 50 kb. I need to achieve this size, for the project, as preact was chosen because of its being low in size.
ANSWER
Answered 2021-Nov-10 at 00:08Bundle sizes are not measured by the raw size of the output directory.
Firstly, the output directory contains content that is not to be used in bundle size discussions. Items like images, SSR intermediary output (separate from the actual result of prerendering), and semi-duplicated output for non-ESM environments are provided. None of these contribute to your bundle size.
Secondly, you're ignoring route splitting. Each component in routes/ is automatically split out, so the user only gets each route when they navigate to them. Say you have /, /about, and /error. The content of /about and /error are not sent to the client when / is requested. You could have hundreds of pages of content, but that does not mean they're all loaded at once.
Thirdly, the size of that directory on disk isn't compressed, unlike webserver output. Gzip and Brotli are rather great at what they do and will further reduce sizes.
Preact-CLI has an option to open a bundle analyzer on your builds (preact build --analyze). Otherwise, run the production-like server we ship with and open your browser. You can see the bundles as a client would (minus the compression).
QUESTION
I have installed Preact but it’s not getting recognized in the terminal. First, I went to the official website of PreactJS. The doc says that I have to run npm install -g preact-cli. As I am using Yarn, I ran yarn global add preact-cli. It was installed successfully but with a lot of warnings. Then I ran preact create default first-preact-app. But it's showing an error that "The term 'Preact' is not recognized as a name of a cmdlet, function, script file or executable program."
I have tried force cleaning the cache and reinstalling preact-cli. But it doesn't work. Two of the warnings are that preact and preact-render-to-string have unmet peer dependency. So, I have installed them also. But it still doesn't work.
I have tried running npm and experimented with the commands also. But it didn't work. So, how can I fix the problem?
I have run these commands using Powershell and Git bash on Windows 10. I am trying to install Preact 10.5.12 using Yarn 1.22.5. And a point to be noted, I tried running yarn dlx but it returns an error that "command not found". And when the installation of preact and preact-render-to-string gets finished, yarn gives and warning that they have no binaries.
EDIT: Perhaps, it was a problem with Windows. The problem has gone after reinstalling it.
...ANSWER
Answered 2021-Mar-13 at 11:16Your problem almost certainly is that preact-cli was not on your PATH - a list of programs that are globally accessible.
For what it's worth, we don't recommend installing globally. The site may still say that but the repository correctly recommends using npx instead.
QUESTION
I am trying to run the preact create command using Yarn. It's simple to run preact create ..... ..... or npx preact create ... ..... It works fine and both of the commands use npm. But I am trying to run the command using Yarn. I have tried the following commands but nothing works. The error says "couldn't find a package.json file in path".
yarn preact create .... ....
yarn dlx preact create .... ....
yarn preact-cli create .... ....
yarn dlx preact-cli create .... ....
So, what should I do to run the command using Yarn. One alternative maybe is running the command using npm and then running yarn install and then running npm uninstall. But what's the actual way?
...ANSWER
Answered 2021-Mar-13 at 11:26There is no Yarn equivalent for npx. The Yarn team thought NPX was enough.
That being said, we support creating a new Preact CLI project with Yarn through the --yarn flag.
QUESTION
I am facing below error on preact build.
...ANSWER
Answered 2021-Jan-29 at 06:43Answered by Preact team - Build using --no-prerender flag because by default Preact builds with prerender and that requires node env.
QUESTION
I'm looking into preact and tools around it for a limited functionality app that should go to production in a few weeks.
My concern is future maintenance: if I create my app from a template with preact-cli, is there an easy way to update my app with latest upgrades and config changes after some time when the template upgrades?
I'm looking for a doc page similar to create-react-app's update notes https://create-react-app.dev/docs/updating-to-new-releases/
...ANSWER
Answered 2020-Nov-29 at 17:13There's no automated way to apply new changes, assuming this is what you're looking for — even create-react-app doesn't have that. Quoting this paragraph from the doc page:
To update an existing project to a new version of
react-scripts, open the changelog, find the version you’re currently on (checkpackage.jsonin this folder if you’re not sure), and apply the migration instructions for the newer versions.
Preact also offers migration guides. Once your project has been scaffolded, there's no easy way to grab the latest updates, but you can follow their docs (example upgrading from v8):
https://preactjs.com/guide/v10/upgrade-guide/
If you ever find yourself wanting to get those upgrades, one way to do that could be generating a new, separate project, and applying those changes manually; going through their guide might still be the best way.
QUESTION
I'm using Preact for the first time.
I simply created a new project with preact-cli and this default template: https://github.com/preactjs-templates/default.
In app.js I'm trying to use this code:
ANSWER
Answered 2020-Sep-19 at 16:25Reactjs is a component library. At the core it has a function like
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install preact-cli
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
