Basics for using npm modules in Phoenix 1.4 application

Hello all,

I recently started experimenting with Phoenix for a personal project, and am loving it so far. However, I’ve gotten really stuck with Webpack and using node modules in my project. I don’t have any experience in front end development, and am in over my head with some of these topics.

I’m trying to use the node module simplemde to be able to turn a textarea into a markdown editor. While I was able to get it working by including the CDN in my html.eex file as follows:

<%= form_for @changeset, Routes.post_path(@conn, :create), fn f -> %>
  <%= label f, :title %>
  <%= text_input f, :title, required: true, placeholder: "Post Title" %>
  <%= error_tag f, :title %>

  <%= label f, :body %>
  <%= textarea f, :body, rows: 20, required: true, focusable: true, placeholder: "Post Body" %>
  <%= error_tag f, :body %>

  <div class="row">
    <div class="column">
      <%= submit "Publish" %>
    </div>
    <div class="column column-50">
      <%= link "Save", class: "button button-outline", to: Routes.post_path(@conn, :index), data: [confirm: "Really discard all changes?"] %>
    </div>
    <div class="column">
      <%= link "Discard", class: "button button-outline float-right", to: Routes.post_path(@conn, :index), data: [confirm: "Really discard all changes?"] %>
    </div>
  </div>
<% end %>


<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
<script type="text/javascript">
  new SimpleMDE({
    element: document.getElementById('post_body'),
    spellChecker: true
  })
</script>

I’ve been having great difficulty actually adding it to my project via webpack though. The steps I’ve taken have been:

Added to package.json and installed node modules

"simplemde": "^1.11.2"
npm install

Added the import to my app.js file:

import css from "../css/app.css"
import "phoenix_html"
import SimpleMDE from "simplemde"

Tried to use simplemde within a script tag of my html.eex file (for brevity, it is the same code as above, except I removed the stylesheet and script with the cdn src tag)

This resulted in the textarea returning to the plain html textarea, with no markdown controls, and an error that SimpleMDE is not defined in the browser console.

My next idea was to remove the script tag with the setup for simplemde from the html.eex file and move it to the app.js file. This worked, and the code is as follows:

import css from "../css/app.css"
import "phoenix_html"
import SimpleMDE from "simplemde"

new SimpleMDE({
  element: document.getElementById('post_body'),
  spellChecker: true
})

There seem to be two problems with this approach, however. 1) the formatting of the textarea isn’t correct. I believe I still need to import or include the stylesheet. 2) this solution applies to all of the pages across my application, because it is in the app.js file. So, when I go to any other page, I get console error messages that say SimpleMDE: Error. No element was found (like it should, since there is no element with id post_body on those pages).

So, from this I have several questions:
How do I share the modules that have been imported to the scripts within my html files?
What is the best practice for using javascript in my application - does it make more sense to always create a javascript file instead of embedding it into a script tag? (is that more maintainable?)
I’m quite certain that the CSS file for simplemde can be imported as well - how do I go about that, and in the future how do I figure out what the names of importable objects are?

I appreciate the help! Cheers

13 comments

/phoenix #javascript #webpack

2 6888 13

2019-04-07 20:41:12 UTC

First Post!

aptinio

In your app.css, add

@import "simplemde";

In your app.js, check if #post_body exists:

var postBody = document.getElementById('post_body');

if (postBody) {
  new SimpleMDE({
    element: postBody,
    spellChecker: true
  })
}

Post #1

Most Liked

mythicalprogrammer

Out of curiosity, why did npm add it to dependencies instead of devDependencies (which is where I had put it originally)?

That’s another command:

npm install --save-dev "package-name-here"

Also, I am getting errors when trying to add the dependency to Webpack.ProvidePlugin… my understanding is that Webpack is not defined

Yeah that’s line 1 of my webpack file (added the first 1 to 8 lines that I skipped out on):

   1 const Webpack = require('webpack');
   2 const path = require('path');
   3 const glob = require('glob');
   4 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   5 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
   6 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
   7 const CopyWebpackPlugin = require('copy-webpack-plugin');
   8

Also watch out for iex -S mix phx.server. It caches webpack and doesn’t run webpack often enough. If you change anything to webpack config you should just rerun that command again to force it to rerun webpack.

Post #7

aptinio

Try:

@import "../node_modules/simplemde/src/css/simplemde.css";

Post #8

adrianrl

Exactly! You do need to generate another bundle, so you must create another entry in the Webpack configuration, like this:

entry: {
  './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js')),
  'simplemde_bundle': ['./js/editor.js'] // The key would be the name of the output
},

Then inside editor.js:

import SimpleMDE from 'simplemde'; // Include the dependency

SimpleMDE({ blah: 'blah' }); // and configure the object

Lastly include the script only when you need it:

<script src="<%= Routes.static_path(@conn, "/js/simplemde_bundle.js") %>"></script>

Please remember to include the script below the element (I’ll assume a textarea), otherwise it won’t find where to use its magic. I can’t test the code, but this will guide you in the right direction, the CSS should be included inside the script too.

Post #13