Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@quoine/preact-cli
Advanced tools
Readme
Start building a Preact Progressive Web App in seconds 🔥
async!
prefixImportant: Node.js > V6.x is a minimum requirement.
$ npm install -g preact-cli
$ preact create <template-name> <project-name>
Example:
$ preact create default my-project
The above command pulls the template from preactjs-templates/default, prompts for some information, and generates the project at ./my-project/
.
The purpose of official preact project templates are to provide opinionated development tooling setups so that users can get started with actual app code as fast as possible. However, these templates are un-opinionated in terms of how you structure your app code and what libraries you use in addition to preact.js.
All official project templates are repos in the preactjs-templates organization. When a new template is added to the organization, you will be able to run preact create <template-name> <project-name>
to use that template.
Current available templates include:
default - Default template with all features.
material - material template using preact-material-components
simple - The simplest possible preact setup in a single file
💁 Tip: Any Github repo with a
'template'
folder can be used as a custom template:
preact create <username>/<repository> <project-name>
Create a project to quick start development.
$ preact create <template-name> <project-name>
--name The application name.
--cwd A directory to use instead of $PWD.
--force Force option to create the directory for the new app [boolean] [default: false]
--yarn Installs dependencies with yarn. [boolean] [default: false]
--git Initialize version control using git. [boolean] [default: false]
--install Installs dependencies. [boolean] [default: true]
Note: If you don't specify enough data to the preact create
command, it will prompt the required questions.
Create a production build
$ preact build
--src Entry file (index.js). [string] [default: "src"]
--dest Directory root for output. [string] [default: "build"]
--prerenderUrls Path to pre-render routes configuration. [string] [default: "prerender-urls.json"]
--template Path to template file. [string] [default: none]
--service-worker Add a service worker to application. [boolean] [default: true]
--production, -p Create a minified production build. [boolean] [default: true]
--no-prerender Disable pre-render of static app content. [boolean] [default: false]
--clean Clear output directory before building. [boolean] [default: true]
--json Generate build statistics for analysis. [boolean] [default: false]
--config, -c Path to custom CLI config.
Spin up a development server with multiple features like hot-module-replacement
, module-watcher
$ preact watch
--cwd A directory to use instead of $PWD. [string] [default: .]
--src Entry file (index.js) [string] [default: "src"]
--port, -p Port to start a server on [string] [default: "8080"]
--host, Hostname to start a server on [string] [default: "0.0.0.0"]
--https Use HTTPS? [boolean] [default: false]
--prerender Pre-render static app content on initial build [boolean] [default: false]
Note:
HTTPS
then you can use the following HTTPS=true preact watch
PORT=8091 preact watch
Start a production version development server
$ preact serve
--cwd A directory to use instead of $PWD. [string] [default: .]
--dir Directory root to serve static files from. [string] [default: "build"]
--server Which server to run, or "config" to produce a firebase config.
[options: "simplehttp2server", "superstatic", "config"] [string] [default: "simplehttp2server"]
--dest Directory or filename where firebase.json should be written
(used for --server config) [string] [default: -]
--port, -p Port to start a server on. [string] [default: PORT || 8080]
Lists all the official preactjs-cli repositories
$ preact list
# create a production build:
npm run build
# generate configuration in Firebase Hosting format:
npm run serve -- --server config
# Copy your static files to a server!
Preact CLI in order to follow PRPL pattern renders initial route (/
) into generated static index.html
- this ensures that users get to see your page before any JavaScript is run, and thus providing users with slow devices or poor connection your website's content much faster.
Preact CLI does this by rendering your app inside node - this means that we don't have access to DOM or other global variables available in browsers, similar how it would be in server-side rendering scenarios. In case you need to rely on browser APIs you could:
--no-prerender
flag to preact build
,if (typeof window !== "undefined") { ... }
ensuring that on server those lines of code are never reached. Alternatively you could use a helper library like window-or-global.To make customizing your configuration easier, preact-cli supports plugins. Visit the Plugins wiki for a tutorial on how to use them.
You may customize your list of supported browser versions by declaring a "browserslist"
key within your package.json
. Changing these values will modify your JavaScript (via babel-preset-env
) and your CSS (via autoprefixer
) output.
By default, preact-cli
emulates the following config:
// package.json
{
"browserslist": [
"> 1%",
"IE >= 9",
"last 2 versions"
]
}
To customize Babel, you have two options:
You may create a .babelrc
file in your project's root directory. Any settings you define here will overwrite matching config-keys within Preact CLI preset. For example, if you pass a "plugins"
object, it will replace & reset all Babel plugins that Preact CLI defaults to.
If you'd like to modify or add to the existing Babel config, you must use a preact.config.js
file. Visit the Webpack section for more info, or check out the Customize Babel example!
To customize webpack create preact.config.js
file which exports function that will change webpack's config.
/**
* Function that mutates original webpack config.
* Supports asynchronous changes when promise is returned.
*
* @param {object} config - original webpack config.
* @param {object} env - options passed to CLI.
* @param {WebpackConfigHelpers} helpers - object with useful helpers when working with config.
**/
export default function (config, env, helpers) {
/** you can change config here **/
}
See WebpackConfigHelpers docs for more info on helpers
argument which contains methods to find various parts of configuration. Additionally see our recipes wiki containing examples on how to change webpack configuration.
The --prerender
flag will prerender by default only the root of your application.
If you want to prerender other routes you can create a prerender-urls.json
file, which contains the set of routes you want to render.
The format required for defining your routes is an array of objects with a url
key and an optional title
key.
// prerender-urls.json
[{
"url": "/",
"title": "Homepage"
}, {
"url": "/route/random"
}]
You can customise the path of prerender-urls.json
by using the flag --prerenderUrls
.
preact build --prerenderUrls src/prerender-urls.json
A template is used to render your page.
The default one is visible here and it's going to be enough for the majority of cases.
If you want to customise your template you can pass a custom template with the --template
flag.
The --template
flag is available on the build
and watch
commands.
preact build --template src/template.html
preact watch --template src/template.html
FAQs
Start building a Preact Progressive Web App in seconds.
The npm package @quoine/preact-cli receives a total of 17 weekly downloads. As such, @quoine/preact-cli popularity was classified as not popular.
We found that @quoine/preact-cli demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.