I tryed to use css frameworks lots of times. But i cant found any guide what to do. Just some post from other developers. Can you help me with the guide, how to import and use css framework in my expressjs project.
For instance, i started new project with express generator:
express --view=pug --css=sass
next, i installed materialize
npm install materialize-css
What i must to do next??? How to connect js and sass files with my project? How to compile all, if i tryed to do just a website? Where i can find good guides about such things, if i will have more questions?? Thanks!
npm was originally to get Node Module, but with the essort of the Javascript language (and the advent of browserify, webpack,etc), it has a bit grown up.
In fact, you can even download Bootstrap on npm, that is not a server side framework. Browserify permits you to use AMD/RequireJS/CommonJS on client side so node modules can be used on client side. Same goes for Webpack module bundler.
If you npm install bootstrap (if you don't use grunt or gulp file to move to a dist folder), your bootstrap will be located in some location like below.
"./node_modules/bootstrap/bootstrap.min.css"
You need to include this in your .html file.
For sass if you use grunt then you will be using this plugin grunt-sass to convert sass to css and add the destination file to the .html file. Similarly goes for gulp.
Related
I'm bundling a bunch of components I regularly use in apps I create with Next.js into an npm package to make it easier to reuse them between projects, however I'm having difficulty getting it to work.
The big issue I have is that some of my components need to import/require a configuration file from the project root directory (e.g. project/node_modules/mypackage/index.[js/jsx/tsx] needs to import/require project/config.[js/ts]) so I need to ensure the app is able to import components from the npm package, and the npm package is able to import/require from the app.
I use Typescript to compile the npm package (no Webpack or Babel) but I'm not sure what settings to use for target, lib, module and jsx, or if I'm able to just keep it uncompiled as .tsx and .ts files (I'm using the canary branch of Next.js which has built-in Typescript support).
I can't find any information in the documentation, here on SO or via Google search. Any advice?
I always wondered how I can properly add the clientsided javascript in my express project. I use Typescript and I would also like to take advantage of the Typescript typings (for jquery for instance) when writing my clientside javascripts.
My project structure looks like this:
root
dist
src
helpers
models
registration
router.ts
form.pug
profile
router.ts
profile.pug
wwwroot
css
js
images
What I have done until today:
I created all clientsided javascript files in wwwroot/js (e.g. jquery.min.js, registration-form.js) and I loaded them into the header of the appropriate pages.
Disadvantages:
I had to write ES5 javascript which is compatible with the browsers we would like to support
I couldn't put the javascript files where they logically belong to (e. g. I'd rather put my registration-form.js into src/registration/ instead of the wwwroot)
No Typescript possible :(. No typescript typings, no transpiling to ES5 etc.
In some tutorials I saw they would simply run npm install --save jquery and import it in their clientsided files. So I feel like I must have missing some pretty important stuff, but I couldn't find any tutorials about it.
My question:
What is the "right way / best practice" to write clientsided javascript in Typescript / Express applications (which should also elliminate also the mentioned disadvantages)?
Using TypeScript on the client side is not much different from the server side.
Here is what you can do:
Create client folder for client-side typescript sources
Put tsconfig.json into client folder and configure it to produce "es5" code (target: es5)
Install jquery types (npm install --save-dev #types/jquery)
That's it, now you can write your client side code in TypeScript.
You can compile server-side code with tsc -p ./src (having server-side tsconfig.json under src) and compile client-side code with tsc -p ./client.
I made a simple example of such app, check it here. I put the simple script to build everything into package.json, so you can run npm run-script complie to get both server and client code complied into /dist folder. Then run it with npm start.
Further steps:
Automate your flow: you should be able to start your app locally and then just edit source TypeScript files and the app should be reloaded automatically. This can be done with webpack / gulp / grunt or custom shell script that can be triggered once any of your source file has been changed and saved.
If you find yourself writing good amount of client-side code, check also angular (https://angular.io/docs). It uses TypeScript as preferred language for client-side development and you'll be able to build much more powerful client-side app using it. You may choose another library as well (react, vue.js, etc), see the examples on the TypeScript site.
I know that could be multiple answers for this question but I would know how i can fast setting up project with Bootstrap and Sass.
I had never used node, npm, grunt or bower, I've installed all already but i can't really find a good tutorial for:
Setting up the project structure
Auto compile sass files on save
(Maybe) Live reload in chrome?
I would suggest not using any boilerplate for your first project as you want to get into the "guts" of it, and once you are familiar with basics, then you can try boilerplate and see what they can do for you.
Few tools you would need to setup a project from scratch includes: Node's npm, Bower, Gulp (for example).
After you have those installed, you can dig in into creating your first project.
1) Initialize your npm project
2) Pull the packages with Bower (Bootstrap scss for starters)
2a) Pull the Specific Bootstrap 3 SCSS port
3) Configure Basic Gulp-scss config for your SCSS needs.
Basic idea behind Bower is that you have unmodified source of plugins/3rd party js/css in bower_components folder, and you use those files to compile a production ready files (js/css). What this means is that your bower_components folder is a "src" folder, and you have to add your "dist" or distributable files. Gulp helps with this part.
For the project structure, further readings and improvements on gulp tasks.
Once you have basic working project, you can try expanding your gulp-config with, like you mentioned Browser Sync and others.
I did compile a "general tasks" gulp file that i use from project to project. You can take a look here and use it if you find it fits.
Hope it helps.
You can try using Aldryn's boilerplate:
https://github.com/aldryn/aldryn-boilerplate-bootstrap3
Documentation
I've started reading up on Node and Express with the intention of porting a few projects of mine over to it. The projects I'm porting are currently built with Python and Flask, and styled with Bootstrap.
I'm having difficulties getting a basic Express site up and running with Bootstrap as the styling. I used express-generator to get the basic skeleton set up, and then used npm to install bootstrap:
npm install bootstrap
I added bootstrap as a requirement, and as a middleware:
var bootstrap = require('bootstrap');
app.use('bootstrap');
Now I'm just not sure how to "import" that into my layout template. If someone could show me an example, or point me to a resource, that'd be great.
Nodejs is used on the backend there is no need to npm install bootstrap. Node will serve your html or jade/pug/ejs etc.
You can use a CDN and link the files in the html or pug. You can also choose to include the CSS and JS files required for bootstrap in the /public directory.
Using the Express generator is a great start, you can specify your templating engine (i.e. jade/pug, ejs etc.) or just use html. Jade/Pug will compile into HTML and be served to the front end (client side). You can include the CDN link within your jade/pug file, similar to how you would include it in regular HTML. You might want to read some documentation for pug/jade since it has a more minimalistic syntax than html, Pug Docs.
To use pug/jade enter the following command (provided you have express generator npm installed already):
express --pug --css
To use html only enter the following command (provided you have express generator npm installed already):
express --no-view --css
The commands above will create the template, all you have to do is include the CDN link within the /view/layout.pug file and you can use bootstrap. Basic routing has been defined, just npm install, and npm start.
You do not need bootstrap as a node module since bootstrap is a front end thing. You'd be better off doing a bower.
Goto your terminal
sudo npm install bower -g
Then, once you have that make a .bowerrc file
nano .bowerrc
set the default directory as public in that file
{
"directory":"./public"
}
Then, finally, do this-
bower install bootstrap --save
That will fetch bootstrap for your styles. If you want to pass data from the server to the htmls, try one of the templating engines like ejs or jade and then later add the cols in there to be rendered as html to the client.
I have the Meteor app setup with such folder structure. I am not able to get the sass or scss file to create the appropriate css on its own and serve it to the client.
What should I do to make sass work as I prefer sass over scss.
Meteor supports less and stylus out of box my issuing meteor add less or meteor add stylus in your project root directory.
there is also a third party package repository (to be rolled into meteor core in the near future) on which you can find alternatives to many requirements.
For example, there is a third party scss package you can add to your project with meteorite add scss.
Now, the meteorite command here belongs to an npm package that interfaces your app to the atmosphere package repository as well as provide some deeper packaging structure to your app.
When you add the scss package, like in a typical meteor application your coffeescript, handlebars,jade,less,scss,javascript etc files will be compiled/bundled at deploy time and at each save afterwards and be placed in a hidden directory. So you will not be seeing your compiled css alongside your scss files, but the css will have been sent to the browser.