Simple lightweight TypeScript 2.0 React Redux Babel Webpack project

I’m never satisfied with bootstraps out there, so I’m always creating some simple ones. Well this one is a bit more complex than the other ones I’ve built because of the complexity of React and Redux.

Check it out at brunolm/ts-react-redux-startup

I recently started using Workflowy (it is free), which is a website where you can create lists and it allows you to use as a brain dump. If you want to check it out you can use this link to get extra items https://workflowy.com/invite/35df8d82.lnx

On my Knowledge List I added things about Redux, Babel, Webpack and everything else…

Continue reading

Simple lightweight TypeScript 2.0 Babel Webpack project

I wanted to create a project using TypeScript + Babel. I knew I would have to setup a few things.

I choose to use Webpack because it has some dev tools, auto-reload. And it is nice to use loaders. But I couldn’t find any minimal simple examples, so I decided to create one.

brunolm/typescript-babel-webpack is a project with just the essential, nothing else. Simple and clean.

You can see that in this project there is a README.md where I tried to write all the steps I went through to create that setup and the issues I faced.

I recently started using Workflowy (it is free), which is a website where you can create lists and it allows you to use as a brain dump. If you want to check it out you can use this link to get extra items https://workflowy.com/invite/35df8d82.lnx

On my Knowledge List I added things about Babel and Webpack.

And this is how I created it:

Installation

  • npm install -D @types/node
  • npm install -D babel-core
  • npm install -D babel-loader
    • Required on Webpack
  • npm install -D babel-polyfill
    • Allows async/await among other things
  • npm install -D babel-preset-es2015
  • npm install -D babel-preset-stage-0
  • npm install -D rimraf
    • I use to clear the output folder
  • npm install -D ts-loader
    • Required on Webpack
  • npm install -D typescript@beta
    • Installs TypeScript 2.0-beta
  • npm install -D webpack

To configure TypeScript I created a `tsconfig.json`

  • tsc -init
    • Changed “target” version to “es6”

To configure Babel I create a `.babelrc` file

  • .babelrc
    •  { “presets”: [“es2015”, “stage-0”] }

These presets come from the installs above. With ES2015 and Stage-0 I am basically saying “include everything there is to include, I want to use it all”. This allows Babel to work with any code you want to use. If you want to make things lighter you could look on Babel docs how those presets work and use only what you need.

Now on Webpack I created a file `webpack.config.js`

module.exports = {
  entry: ['babel-polyfill', './src/'],
  output: {
    path: __dirname,
    filename: './dist/index.js',
  },
  resolve: {
    extensions: ['', '.js', '.ts'],
  },
  module: {
    loaders: [{
      test: /\.ts$/, loaders: ['babel-loader', 'ts-loader'], exclude: /node_modules/
    }],
  }
};
  • entry
    • Filename
    • Array of files
    • Object with properties that are arrays and/or strings
  • output
    • path
        • Defines output directory
    • filename
        • name of generated file
        • if entry is an object you can use `[name]` which gets the prop name to bundle in different files
  • resolve
    • extensions
        • Array of extensions to parse
        • `extensions: [”, ‘.js’, ‘.ts’],`
  • module
    • loaders
      • Array of objects
        • test
          • Regex to test file name (test extension .ts .js)
        • loaders
          • Installed loaders to parse matched files
          • Run right to left
          • [ ‘babel-loader’, ‘ts-loader’ ]
          • ‘babel!ts’
        • exclude
          • /node_modules/

I had only one issue during this setup, I was getting an error

error TS2304: Cannot find name 'regeneratorRuntime'.

. It was because I had my loaders in wrong order. The correct order is RIGHT to LEFT, so TypeScript should go last to run first. http://stackoverflow.com/a/38321269/340760 

And this is how I configured it all.

Simple lightweight Angular2 TypeScript Webpack project

I wanted to create a project using Angular2. I started to code it and I realized I would have to setup a few things.

I choose to use Webpack because it has some dev tools, auto-reload. It wasn’t so simple to set it up, their documentation didn’t help me much.

It was then that I decided I needed to make things simpler so I created brunolm/angular2-startup. It is a project with just the essential, nothing else. Simple and clean.

You can see that in this project there is a README.md where I tried to write all the steps I went through to create that setup and the issues I faced.

I recently started using Workflowy (it is free), which is a website where you can create lists and it allows you to use as a brain dump. If you want to check it out you can use this link to get extra items https://workflowy.com/invite/35df8d82.lnx

And I also added all the steps on my Workflowy and instructions on my Knowledge List.

Workflowy: A tool for everything, just like Trello

TL;DR; Workflowy is a (free) website where you can take notes and doesn’t matter how big it gets it is still easy to manage. Check it out https://workflowy.com/invite/35df8d82.lnx

Workflowy is a (free) website where you can take notes on lists. It is being really useful for me because I can take notes of steps I take to complete something then when I need it again I can just look at my notes instead of having to figure it all out again. I can also take notes of commands I run so if I need something crazy again I don’t have to figure it out, it is already there.

If you want to try it out you can register with this link https://workflowy.com/invite/35df8d82.lnx

Continue reading

Installing and using Secret Manager on ASP.NET Core

In your ASP.NET Core application you can load settings from a file named secrets.json that can store API ids and secrets. The default generated template includes:

if (env.IsDevelopment())
{
    builder.AddUserSecrets();
}

That is going to add that file only on a development environment. So the whole point of using this secret storage is to avoid having your ClientId and ClientSecret exposed on source control. In production you can have it stored on environment settings, the generated template includes:

builder.AddEnvironmentVariables();

Which is going to add the environment variables on your application configuration.

Continue reading

The new ASP.NET Core 1.0

ASP.NET 5 is dead, now it is called ASP.NET Core 1.0.

  • ASP.NET 5 is now ASP.NET Core 1.0
  • .NET Core 5 is now .NET Core 1.0
  • Entity Framework 7 is now Entity Framework Core 1.0

It is not yet officially released, they don’t have a date yet but they said they won’t take just a month but they won’t take years. You can use it today in production if you want to, but as it is not done yet some things could break, be renamed…

Continue reading