Use with Express.js ?

4 replies · opened Sep 25, 2019

Vvassil9496Sep 25, 2019

Hello

Can Canvas be used with Express.js please ? I can't get anything else than a blank page and installation instructions do not seem to be sufficient to me if templates can actually be used with Express.

Thanks

Vvassil9496Sep 25, 2019

Sometimes magic happens :):) I'm a beginner and I was completely lost at the beginning.
I was about to give up but my last attempt looks pretty good so far. Here is what i've done to make this works with Express.
It all about files location and customization of references to js and css files.

Please Canvas team, enrich your installation documentation with specific workflow examples, step by step :)

STEP 1
Set up Node and Express (there are a by folders created by default)

STEP 2
we will have to copy certain files from canvas unzipped folder (SOURCE) to your project folder (DESTINATION)
(detailed steps below)

STEP 2a (image files)
copy [...]Package-HTML\HTML\images into [...]public\images

STEP 2b (css files)

  • copy the 5 css files in [...]Package-HTML\HTML into [...]public\stylesheets
  • copy all files in [...]Package-HTML\HTML\css into [...]public\stylesheets\css

STEP 2c (javascript files)

  • copy all files in [...]Package-HTML\js into [...]public\javascripts
  • copy AGAIN all files in [...]Package-HTML\js into [...]public\javascripts\js
    (one of these 2 steps is certinly useless but don't know which one

STEP 3

  • choose the HTML file template you want to use
  • copy it into [...]views
  • rename it to .ejs

STEP 4 - MODIFY HREF TO CSS AND JS FILES AS FOLLOWS

<link rel="stylesheet" href="./stylesheets/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="./stylesheets/style.css" type="text/css" />
<link rel="stylesheet" href="./stylesheets/css/dark.css" type="text/css" />
<link rel="stylesheet" href="./stylesheets/css/font-icons.css" type="text/css" />
<link rel="stylesheet" href="./stylesheets/css/animate.css" type="text/css" />
<link rel="stylesheet" href="./stylesheets/css/magnific-popup.css" type="text/css" />
<link rel="stylesheet" href="./stylesheets/css/responsive.css" type="text/css" />

<script src="./javascripts/jquery.js"></script>
<script src="./javascripts/plugins.js"></script>
<script src="./javascripts/functions.js"></script>

Not fully tested of course but for now I don't have any errors in the inspector.

SSemicolon WebSTAFFSep 26, 2019

Hello,

Thank You so much for your inputs and the Installation Instructions on using Canvas with Express.JS . We really really appreciate it.

Canvas is not readily compatible with Express.JS and is a Raw HTML5/CSS3 Template which you can extend according to your needs. If, as you mentioned, you experience a Blank Page error, simply add the .no-transition Class to the <body> Tag and the issue will be resolved.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Vvassil9496Sep 27, 2019

Many thanks for your reply SemiColonWeb !

2 minor precisions :

  • for STEP 2c (javascript files), you do NOT need to create folder […]public\javascripts\js and to copy the sames javascript files again (of course);
  • for step STEP 2a (image files), you do NOT have to copy all files (of course) but only those you want to actually use (search for *.svg, *.jpg, *.png or other media files in parts of html code you are using).

For now all works perfectly, thanks !

SSemicolon WebSTAFFSep 28, 2019

Hello,

Thank You so much once again for the Detailed Information. It is really helpful for us and will be definitely helpful for other users using Express.JS.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard