PhxQL

This is startup template that I found myself use so often and it take sometime to setup so I preconfigured it to be ready to work with.

How it was configurated?

• First I removed milligram CSS Framework that is used by default in Phoenix by just deleting phoenix.css file from /assets/css/ folder.
• Added Bulma CSS Framework using yarn add bulma --dev and changed /assets/app.css -> /assets/app.scss and added to it:
  • @import "~bulma/bulma" to add support for Bulma, you can write the full path ../node_modules/bulma/bulma if you faced issues in recognizing it.
  • @import "./custom" for my custom styles, refers to /assets/_custom.scss file.
• Added Tailwindcss CSS utility framework to have more control on my styling, for information about how to install it and configure it please read this quick tutorial.

Webpack Configurations webpack.config.js

• Support Sass using DartSass and sass-loader.
• Configure sass-loader options: {implementation: require("sass")} so it will use sass instead of the default one node-sass and will stop complaining.
• Added Elm which was installed globally on my system, but you can install it using yarn or npm to your dependencies
• Support Elm using elm-webpack-loader
• While you are in /assets folder path, run in terminal elm init to initialize elm app which will add elm.json and src folder for you under /assets folder directly.
• In /assets/js/app.js file you need to write these lines of code:

  import { Elm } from "../src/Main.elm"
  var app = Elm.Main.init({
  node: document.getElementById('elm-main')
  });

• I replaced everything in /lib/YOUR_APP_WEB/templates/page/index.html.eex file with <div id="elm-main"></div> as here my elm output will show up.
• I removed most of boilerplate code that comes in app.html.eex file. I added also FontAwesome 5.9.0
• Sometimes I face issues when installing elm-webpack-loader due to node version, as I always have latest version of it so if you have issues due to node version then add .nvmrc file inside /assets folder and in it write 12.13.0 which is latest LTS version of node at the time of writing this, if you want to configure nvm or install it on your system check this if you use oh-my-zsh or this for nvm itself as a Node Version Manager, UPDATE: no issues with new versions of node as I have now version 13.3.0 and it works fine.

Adding GraphQL

• Add GraphQL for Phoenix is very straight forward, check please Absinthe for installation.
• To make Elm talks GraphQL, we will install elm-graphql package using elm install command in Terminal while you are in /assets folder as your elm app installed there or if you separate it somewhere else then you need to install that package where your elm app exsits.

Phoenix Configs

• Modified router.ex file with the /graphql and /graphiql routes.
• Added some dummy folders and files for schema file, schema types, resolvers files.

TODO

• Add folders and files for schema and resolvers.
• Add User Authentication and Authorization.
• Add Session support.
• Add GraphQL Schema and Resolvers.
• Add Blog Posts and Comments schemas.
• Implement GraphQL to create, delete Posts and Comments.
• Implement Elm-GraphQL and connect to our backend.

To start your Phoenix server:

• Install dependencies with mix deps.get
• Create and migrate your database with mix ecto.setup
• Install Node.js dependencies with cd assets && yarn install
• Start Phoenix endpoint with mix phx.server

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Learn more

• Official website: http://www.phoenixframework.org/
• Guides: https://hexdocs.pm/phoenix/overview.html
• Docs: https://hexdocs.pm/phoenix
• Mailing list: http://groups.google.com/group/phoenix-talk
• Source: https://github.com/phoenixframework/phoenix