https://github.com/jdalberg/hello
I simple phoenix/preact/typescript project based on rollup
https://github.com/jdalberg/hello
phoenix-framework rollup-example typescript2
Last synced: 4 months ago
JSON representation
I simple phoenix/preact/typescript project based on rollup
- Host: GitHub
- URL: https://github.com/jdalberg/hello
- Owner: jdalberg
- License: mit
- Created: 2018-04-26T13:30:08.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-05-29T05:45:13.000Z (about 8 years ago)
- Last Synced: 2025-06-03T19:36:27.387Z (12 months ago)
- Topics: phoenix-framework, rollup-example, typescript2
- Language: JavaScript
- Homepage:
- Size: 89.8 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Hello - rollup, preact & typescript
This example project is to illustrate how to configure the phoenix framework
to use rollup instead of the default brunch for asset management. How to
configure typescript and preact, to get at bare project up and running with
these awesome components.
The project is created using the following steps
## Phoenix
mix phx.new --no-ecto --no-brunch hello
This just creates the basic bare phoenix project. If you are used to using brunch with phoenix
you will notice that there is no assets dir here because of the no-brunch parameter. We will
add our own structure.
Install dependencies with `mix deps.get`, the mix task above asked me
if i wanted to install deps.
## Basic node_modules
In the default brunch mode, all non js related assets will be copied
directly to priv. You can use rollup for this with some plugins. For instance use rollup with postcss to manage styleheets. Read more about that here https://code.lengstorf.com/learn-rollup-css/
Rollup is configured just to bundle the typescript files (tsx) into
the app.js in priv/js
Before you start phoenix, do
```
cd assets
npm install
```
This will install the needed node_modules as defined in package.json.
## So?
Start Phoenix endpoint with `mix phx.server`
Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.
You should see a tick counter and nothing else.
# Why did you do this?
This is just a guide of sorts to get you dev environment setup for
this type of project. Something i needed to do and could find very
little information on. Also, I forget easily, so I will let github
remember :)