astro icon indicating copy to clipboard operation
astro copied to clipboard
verified publisher icon magnetis

Challenges setting up Astro with Phoenix/elixir

Open lbighetti opened this issue 7 years ago • 3 comments

Description

Hi there! I'm trying to setup Astro with a Phoenix/elixir application and I'm facing some challenges.

Here is what I've tried to do some far:

1 - Installing astro via npm and adding the import it via the html head, like so:

  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Flowtime · Phoenix Framework</title>
    <link href="/node_modules/@magnetis/astro/dist/astro.css" rel="stylesheet" type="text/css" />
  </head>

But, this doesn't work, because webpack is used from phoenix defaults, and it processes frontend assets into the final folder/files structure, which no longer has a /node_modules/ to begin with.

So i've tried:

2 - Trying to import Astro from another CSS file

In my /asset/css/app.css I try to do this:

@import "@magnetis/astro";

But I get an error:

ERROR in ./css/app.css Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './@magnetis/astro' in '/Users/leandro/ws/flowtime/assets/css' at factory.create (/Users/leandro/ws/flowtime/assets/node_modules/webpack/lib/Compilation.js:518:10) at factory (/Users/leandro/ws/flowtime/assets/node_modules/webpack/lib/NormalModuleFactory.js:360:22) at resolver (/Users/leandro/ws/flowtime/assets/node_modules/webpack/lib/NormalModuleFactory.js:120:21) at asyncLib.parallel (/Users/leandro/ws/flowtime/assets/node_modules/webpack/lib/NormalModuleFactory.js:200:22) at /Users/leandro/ws/flowtime/assets/node_modules/neo-async/async.js:2825:7 at /Users/leandro/ws/flowtime/assets/node_modules/neo-async/async.js:6886:13 at normalResolver.resolve (/Users/leandro/ws/flowtime/assets/node_modules/webpack/lib/NormalModuleFactory.js:190:25) at doResolve (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:184:12) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn0 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at resolver.doResolve (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:37:5) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn0 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn0 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at resolver.doResolve (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn42 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn0 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :27:1) at resolver.doResolve (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:42:38) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn1 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :16:1) at hook.callAsync (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/Resolver.js:238:5) at _fn0 (eval at create (/Users/leandro/ws/flowtime/assets/node_modules/tapable/lib/HookCodeFactory.js:33:10), :15:1) at fs.stat (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/DirectoryExistsPlugin.js:22:13) at process.nextTick (/Users/leandro/ws/flowtime/assets/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:73:15) at process._tickCallback (internal/process/next_tick.js:61:11) @ ./js/app.js 4:0-33 @ multi ./js/app.js Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!css/app.css: [./node_modules/css-loader/dist/cjs.js!./css/app.css] 288 bytes {mini-css-extract-plugin} [built] + 1 hidden module

ERROR in ./node_modules/css-loader/dist/cjs.js!./css/app.css
Module not found: Error: Can't resolve './@magnetis/astro' in '/Users/leandro/ws/flowtime/assets/css'
 @ ./node_modules/css-loader/dist/cjs.js!./css/app.css 3:10-79

3 - Copying /dist/* content from Astro into my phoenix /assets/.

I finally attempted just copying the dist content directly inside my app/assets Then, I import it from the /assets/js/app.js, like so:

import css from "../astro.css"

This seems to get me farther, but then something goes wrong when the astro.css calls the icons, I get many variations of this error:

ERROR in ./assets/icons/pizza.svg

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M1.745 12.96a9.295 9.295 0 0 0 18.55.872H10.168V3.705c-4.725.44-8.423 4.416-8.423 9.255zm20.335-.872v.872c0 6.097-4.943 11.04-11.04 11.04C4.943 24 0 19.057 0 12.96 0 6.863 4.943 1.92 11.04 1.92h.872v10.168H22.08zM14.4 9.6V0c5.068 0 9.222 4.23 9.6 9.6h-9.6z" id="a"/></defs><g transform="translate(4 4)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use fill="#32383C" fill-rule="nonzero" xlink:href="#a"/><g mask="url(#b)" fill="#32383C"><path d="M-3.84-3.84h31v31h-31z"/></g></g></svg>
 @ ./node_modules/css-loader/dist/cjs.js!./astro.css 44:42-77

Expected behavior

I would like to use Astro inside a Phoenix template.

Steps to reproduce

Using Phoenix >= v1.4, elixir >= v1.6

mix phx.new

Then try to use Astro inside one of the template pages.

Other information

I'm not sure it is within the scope of the project to help with setup in different environments/frameworks but I know you use Elixir in Magnetis so I thought I'd give it a try :)

lbighetti avatar Apr 16 '19 14:04 lbighetti

hi there @philss :)

I would like to try it out from the CDN after #95 It seems like a reasonable solution, at least as a initial setup

I will do that and come back here with the results! 👍

lbighetti avatar May 23 '19 11:05 lbighetti

Hi @lbighetti, could you share any thought about you results of import Astro on an elixir/phoenix project via CDN?

brunobc182 avatar Jun 05 '19 12:06 brunobc182

I've managed to import and use astro with phoenix + webpack with the following:

  • Imported astro using ~@magnetis/astro
  • Configured the svg-url-loader to inline the SVG icons
diff --git a/assets/css/backoffice.css b/assets/css/backoffice.css
index 8b13789..fc75cfa 100644
--- a/assets/css/backoffice.css
+++ b/assets/css/backoffice.css
@@ -1 +1 @@
-
+@import '~@magnetis/astro';
diff --git a/assets/package.json b/assets/package.json
index 6d2eaf7..ce3e912 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -6,8 +6,10 @@
     "watch": "webpack --mode development --watch"
   },
   "dependencies": {
+    "@magnetis/astro": "^3.0.0",
     "phoenix": "^1.4.10",
-    "phoenix_html": "^2.13.2"
+    "phoenix_html": "^2.13.2",
+    "svg-url-loader": "^3.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",
diff --git a/assets/webpack.config.js b/assets/webpack.config.js
index 765c9b3..9421c95 100644
--- a/assets/webpack.config.js
+++ b/assets/webpack.config.js
@@ -31,6 +31,10 @@ module.exports = (env, options) => ({
       {
         test: /\.css$/,
         use: [MiniCssExtractPlugin.loader, 'css-loader']
+      },
+      {
+        test: /\.svg$/,
+        loader: 'svg-url-loader'
       }
     ]
   },

lucasmazza avatar Nov 07 '19 20:11 lucasmazza