Code Monkey home page Code Monkey logo

default's Introduction

preact-default-boilerplate

Lighthouse-Badge

Documentation

  • This is the default template for preact-cli.
  • For Preact: General information about how to work with Preact, not specific to this template

Usage

$ npx preact-cli create default my-project
$ cd my-project
$ npm install
$ npm run dev

Development server runs on port 8080. If the default port is already in use on your machine it will start the development server on a random port.

Commands

  • npm run dev: Run a development, HMR server

  • npm run serve: Run a production-like server

  • npm run build: Production-ready build

  • npm run lint: Pass JavaScript files using ESLint

  • npm run test: Run Jest and Enzyme with enzyme-adapter-preact-pure for your tests

How to Test

The default template provides a basic test setup with Jest, Enzyme, and enzyme-adapter-preact-pure. You are free to change Enzyme with any other testing library (eg. Preact Testing Library).

You can run all additional Jest CLI commands with the npm run test command as described in the Jest docs. For example, running jest in watch mode would be :

  • npm run test -- --watch instead of jest --watch

Fork It And Make Your Own

You can fork this repo to create your own boilerplate, and use it with preact-cli:

preact create username/repo my-project

default's People

Contributors

amitsarangi avatar cristianbote avatar daniel-sudz avatar developit avatar fokusferit avatar forsakenharmony avatar jennydaman avatar jgierer12 avatar jonathantneal avatar lukeed avatar marvinhagemeister avatar motosharpley avatar prateekbh avatar reznord avatar rschristian avatar scythianfuego avatar selrond avatar teamop avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

default's Issues

Tests with unistore

Regarding the test setup i am having troubles when it comes to wrap the element around a unistore Provider

This test will pass and it finds the h1 tag inside the Testable component

test('Render testc read h1', () => {
        const context = deep(<Testable />);
        console.log(context.output());
        expect(context.find('h1').length).toBe(1);
      });

This test will fail because it won't find the h1 inside the Testable component, although preact-render-to-string render function will print the markup properly

test('Render testc read h1', () => {
        const context = deep(<Provider store={store}><Testable /></Provider>);
        console.log(context.output());
        expect(context.find('h1').length).toBe(1);
    });

Somehow i have been struggling with this for weeks now and still did not manage to make it work.
Is it possible that one can not test components this way?

Meta description

Do you want to request a feature or report a bug?
Feature

What is the current behaviour?
The template does not provide a <meta name="description">

If the current behaviour is a bug, please provide the steps to reproduce.
N/A

What is the expected behaviour?
Perhaps take the description property from the manifest.json to streamline it with the other generated meta tags

If this is a feature request, what is motivation or use case for changing the behaviour?
A site description is essential for SEO and accessibility.

Please mention other relevant information.
N/A

[question] Any clue why pug-as-jsx-loader doesn't work?

Regarding this bluewings/pug-as-jsx-loader#29 (comment).

The app was created using preact-cli:

$ preact create default preact-default --yarn
$ cd preact-default
$ yarn 
$ yarn add pug-as-jsx-loader
// create file.pug and import in any route
$ yarn dev

preact.config.js

export default (config, env, helpers) => {
  config.module.loaders.push({
    test: /\.pug$/,
    use: ['babel-loader', 'pug-as-jsx-loader?transpiledFile=true'],
  });

  return config;
};

How to use template.html

I want to add a bootstrap to the html template, but when I try it webpack yields an error:
✖ ERROR Template execution failed: ReferenceError: preact is not defined

Steps to reproduce

  1. Install the default template (preact create default my-project)
  2. Copy the preact-cli template.html to src/template.html
  3. Run preact watch --template src/template.html

Does anyone know a way to achieve what I want to do without getting this error?

How to add React to Preact aliasing via `preact/compat`?

Hello everyone. I just created my first preact application via preact-cli with the default template, hence posting this question here in the correspoding repository.

The Getting Started guide states Aliasing React to Preact, but unfortunately I don’t quite know how we’d do that. There’s no webpack or parcel config in the created application blueprint, or am I missing something?

Could someone please explain, how to add preact/compat to our application?

build broken on Windows

The devDependency per-env has had a known Windows bug that hasn't been resolved for years.

An alternative package, by-node-env which seems better maintained, may offer a drop-in replacement.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.